There are 2 CSS preprocessors to choose from:
They both have been around for several years. We’re going to use Sass.
Sass vs SCSS
Sass has 2 syntaxes available:
- Sass itself (Syntactically Awesome StyleSheets) in
- SCSS (Sassy CSS) in
.scssfiles, which is something halfway between regular CSS and Sass
The difference between Sass and SCSS is quite subtle.
- Sass is the name of the preprocessor
- SCSS is easier to learn
- all resources on the internet (like The Sass Way) mention Sass, not SCSS
- all features are available for both syntaxes
- everything in SCSS is available in Sass
We’re actually going to write SCSS but still call it Sass.
Why SCSS first
We’re gonna use SCSS for a few reasons:
- readibility: the syntax is very similar to CSS
- learning curve: it only adds a few additional features on top of CSS
- compatibility; a CSS file is a valid SCSS file
- resources: lots of online articles to read and open source libraries to use
- expandibility: it’s easy to go from SCSS to Sass
What Sass provides1 is:
- variables: instead of repeating
#fce473throughout your CSS file, just set
- nesting: CSS rules can be nested within each other
- mixins: custom functions that can accept parameters and will prevent useless repetitions
- extensions: an easy way to inherit the same properties of another selector
- operators: adding/substracting/multiplying/dividing values, like
960px / 4or
$space * 2
Everything about Sass is to provide tools to prevent repeating yourself in your code: it’s the DRY principle, which stands for Don’t repeat yourself.
- variables prevents repeating values
- nesting prevents repeating selectors
- mixins and extensions prevent repeating properties
Head towards https://sass-lang.com/install to install Sass on your computer.
and any CSS preprocessor for that matter, but I’ll refer to Sass only from now on. ↩