CSS

ℹ️
SASS is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions and more.
The sass package supports both SASS and SCSS.
SCSS is the same thing as SASS, except with braces {} and semicolons ;, so more familiar.

SASS example

No braces, no semi-colons
.countdown-box position: absolute top: 0.4rem left: 50% width: 200px margin-left: -100px

SCSS example

Much more familiar if you know CSS
.countdown-box { position: absolute; top: 0.4rem; left: 50%; width: 200px; margin-left: -100px; }

Setup

$ npm install -g sass
Start it in a terminal to watch a certain folder (./scss in this example) and save the output into another folder (./public/css is the result of below):
$ sass --watch scss:public/css
or watch a file and output it into another file:
$ sass --watch scss/style.scss public/css/style.css
You don’t need more than one file if you import all the others into that one in scss:
@import "variables.scss"; @import "divider.scss"; body { background-color: $main-color; }

Nesting

You can nest things!
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }

Variables

Define variables with $, then use them again and again and again! Maybe even make a separate file with just all the variables, then you can tweak that file to change the overall look!
Note: variables declared within blocks are local and can only be accessed within that block! (as in the example below)
.circle { $size: 100px; width: $size; height: $size; border-radius: $size * 0.5; }

Interpolation

Embed the result of a SassScript expression into a chunk of CSS. Just wrap an expression in #{}
@mixin corner-icon($name, $top-or-bottom, $left-or-right) { .icon-#{$name} { background-image: url("/icons/#{$name}.svg"); position: absolute; #{$top-or-bottom}: 0; #{$left-or-right}: 0; } } @include corner-icon("mail", top, left);
It’s useful for generating names (for example for animations)
@mixin inline-animation($duration) { $name: inline-#{unique-id()}; @keyframes #{$name} { @content; } animation-name: $name; animation-duration: $duration; animation-iteration-count: infinite; } .pulse { @include inline-animation(2s) { from { background-color: yellow } to { background-color: red } } }

Leave a comment