Day 5: Underestimated SASS

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.

$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:

#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:

@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:

@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:

@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:

@each $box in column, row {
  #{$box}-flexbox {
    flex-direction: $box;
  }
}

You can also use it with a map:

$colors: (color1: blue, color2: red, color3: green);

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

And of course, the @while loop:

$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:

@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:

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!
Also on Twitter!