Day 5: Underestimated SASS
Tags: 100daysofcode, beginners, webdev, css
Published: 2022-04-09 14:02:03

*The Feynman technique says that teaching a subject makes you better at it, which is what I'm trying to do here. You may correct me if you saw mistakes in this post*

## SASSとは何ですか❓

SASS (or Syntactically Awesome Style Sheet) is basically an extension to our old nemesis, CSS. It has nesting (finally!), logic, even freaking `for`, `each`, and `while` loops! Let's see what it can do...

## Variables

Well, I won't say much on this one. CSS already has variable system.
```scss
$main-color: white;
```

## Nesting 🐣

The way to select children in parent element(s) in CSS is kinda unintuitive, at least for me.

So I'm glad when I learned that SASS use nesting to *actually* show the nesting of elements in a logical way:
```css
#container {
  background-color: black;

  p {
    color: yellow;
  }
}
```

## Mixins 🙆‍♀️

`@mixin` is a feature that allows packing lots of styles into a single liner. Particularly useful for tackling browser prefixes:
```scss
@mixin rad-bod($val) {
  -webkit-border-radius: $val;
  -moz-border-radius: $val;
  -ms-border-radius: $val;
  border-radius: $val;
} 
```
Oh yeah it also supports variables.

## Logical Reasoning

`if` statements exist in SASS, and combined with `@mixin` creates a verbose syntax:
```scss
@mixin border($thicc) {
  @if $thicc == thin {
    border: 1px solid black
  }
  @else if $thicc == thick {
    border: 3px solid black
  }
  @else {
    border: none
  }
}
```

## Loops

Tired of targeting those IDs in your HTML files? You can loop through numerical IDs with the `for` loop:
```scss
@for $index from 1 to 10 {
  .text-#{$index} {
    background-color: rgba(0, 255, 255, 0.1 * $index);
  }
}
```
Note the `#{$index}` notation. It cast the `$index value` to be used as strings that are evaluated to CSS, so it can be `.text-1`, `.text-2`, etc. Also the `to ` keyword excludes the last number. To include them, use `through`.

Next, the `@each` loop:
```scss
@each $box in column, row {
  #{$box}-flexbox {
    flex-direction: $box;
  }
}
```
You can also use it with a map:
```scss
$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}
```

And of course, the `@while` loop:
```scss
$x: 1;
@while $x < 10 {
  .row-#{$x} { height: 100%/12 * $x;}
  $x: $x + 1;
}
```

## Importing partials

*Partials* are SASS files that can be imported into another file (think modules in Python). Partial files must be prefixed with an underscore.

To import them:
```scss
@import 'text_part'
```
You don't need to rewrite the underscore, as SASS compilers understand this.

## Extend styles to other elements!

If you have repeatable styles across elements, you can 'borrow' their style for another element:
```scss
p {
  color: white;
  font-family: Robota;
}

h2 {
  @extend p;
  background-color: cyan;
}
```

## Afterwords

Okay, I clearly underestimated how much FreeCodeCamp can pack knowledge in just 9 lessons. TBH I think this post is the longest one I made. So I'm gonna take a rest, and finally meet React ☄.

Just a note, I have used SASS before, but I only use the nesting and mixin feature, so this is definitely an eye opener for me to get gud in basics. 

By the way, I use the `sassc` compiler on Linux (or WSL on Win10) for compiling SCSS files to CSS. Also, remember to put them on `.gitignore` if you compile them yourself and you are publishing to Github.

Alright, see you tomorrow! 👋

Follow me on [Github](https://github.com/Kemystra)!
Also on [Twitter](https://twitter.com/kemystra)!