Introduction

CSS (covered twice already) works, but it repeats itself: the same colour value in twenty places, the same media query copied again and again, no variables, no reuse. Sass, created by Hampton Catlin in 2006, is a preprocessor — a language that adds programming features to CSS and then compiles down to plain CSS the browser understands. Its SCSS syntax (the standard today) looks like CSS with superpowers, which is why it spread through large codebases long before CSS itself gained variables.

Variables, nesting, and mixins

Three features explain most of Sass's appeal:

$primary : #2563eb ; $spacing : 16px ; .card { padding : $spacing ; border : 1px solid $primary ; h2 { color : $primary ; margin-bottom : $spacing ; } & :hover { border-color : darken ( $primary , 10% ); } } @mixin center { display : flex ; align-items : center ; justify-content : center ; } .hero { @include center ; }

Enter fullscreen mode

Exit fullscreen mode

Variables ( $primary ) mean a colour changes in one place, not…