TIL - SASS - CSS Preprocessor
Tags: css, sass, beginners, todayilearned
Published: 2020-09-09 03:38:24


# Prefix
A preprocessor allows you to write CSS in an alternative language that brings more advanced features such as variables, functions, the ability to include files in others, in short a whole bunch of things allowing you to write more simply, to better organize your code, while avoiding repetition as much as possible. They usually have a built-in prefixer to add browser compatibility at build-time. And they have plugins that will make CSS development a bit easier. It will be compiled to be converted back to native CSS which only web browsers can understand. So,the preprocessor does not bring any new features to CSS, but just allows you tof acilitate writing.

I will go deeper into *[SASS](https://sass-lang.com/guide)*, because it is the most widespread today (and used by bootstrap 4). There is Sass / SCSS, first one more far away from CSS, second one more similar to CSS - so i dive into SCSS for now. 

To transform the SCSS file into a browser-interpretable CSS, a small compiler must be installed.
[SASSMeister](https://www.sassmeister.com/) compiles SCSS directly online into CSS. 

#Nesting
[basic nesting examples](https://www.sitepoint.com/sass-basics-nesting/)

```css
.maListe {
            background-color:red;
            &:hover {
                background-color:blue;
                > li {
                    color:purple;
                }
            }
            > li {
                color:green;
                &:hover {
                    color:yellow;
                }
            }
        }
```
you can also nest media queries 
```css
.sidebar{
    width: 300px: 
    @media screen and (orientation: landscpae) {
    width: 500px; 
    }
}
``` 

#Variables
```css
    $couleur-first: #fffff;
    $couleur-second: #00000;

    .page {
        color: $couleur-first;
        background-color : $couleur-second; 
    }
``` 
variables exist also natively under CSS since CSS3

#SCSS specific functions
Some are dedicated to colors. You can calculate a color derived from another.
* lighten($color, $amount) / darken ($color, $amount) allows you to calculate a lighter/  darker color based on a specified percentage.
* saturate() / desaturate() to play on saturation, 
* complement() / inverse() to obtain the complementary or reverse color

[controlling color with functions](https://thoughtbot.com/blog/controlling-color-with-sass-color-functions)
[other functions](https://sass-lang.com/documentatio/modules)

SCSS makes it possible to define functions, returning a result, not to be confused with the mixins that return CSS code.

```css
grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
 @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); } //240px
``` 

#Mixins

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in paramters to make your mixin more flexible. 

e.g. shadow on a box +  the text half as big and of a lighter color

```css
    @mixin myShadows ($x, $y, $blur, $color) {
        text-shadow : $x $y $blur $color;
        box-shadow : $x/2 $y/2 $blur/2 lighten($color, 50);    
    } 

    .myText {
        @include myShadows(6px 6x 4px #ff0000);
    }
``` 

#Importing
You can import a scss file into another one. This makes it easier to split these files. (Also: i changed @import into @use, thanks to the commend below (thanks!) )

```css
//base.scss
body {
...
}

index.scss
@use 'base'; 
nav{
...
}
```
#extend
The extend allows you to repeat the CSS code of another block and to add properties to it, avoiding any rewrite.

```css
.myButton{
  padding: 5px; 
  color: white; 
}

.myButton-sucess{
  @extend .myButton; 
  background-color: green; 
}

.myButton-error{
  @extend .myButton; 
  background-color: red; 
}
``` 
#Conditions

```css
@if <condition> {
	property to be applied if condition returns true
} @else if <condition> {
	property to be applied if condition returns true
} @else {
	property to be applied if previous conditions returns false
}
``` 
e.g. 
```css
$myMainColor : blue; 

p{
  @if $myMainColor == blue {
    color: orange, 
 } @else if $myMainColor == green {
    color: red; 
 } @else $myMainColor == yellow {
   color: purple
 }
}
```
We can also use loops to iterate over the variables, with:

@for
@each
@while

```css
@for $i from 1 through 3 {
 .item-#{$i} { width: 2em * $i; }
}


@each $color in blue, white, red
.flag {
 .div-#{$color} {
display: inline-block;
width: 10px;
height: 50px;
   background-color: $color;
 }
}

$i: 3;
@while $i > 0 {
 .item-#{$i} { width: 2em * $i; }
 $i: $i - 1;
}
```
[Workshop](https://github.com/workshopper/learn-sass)