9.2 Sass vs SCSS vs Less

There are 2 CSS preprocessors to choose from:

• Less https://lesscss.org/
• Sass https://sass-lang.com/

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 .sass files
• SCSS (Sassy CSS) in .scss files, which is something halfway between regular CSS and Sass

The difference between Sass and SCSS is quite subtle.

Remember that:

• 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

Features

What Sass provides¹ is:

• variables: instead of repeating #fce473 throughout your CSS file, just set $yellow: #fce473 once
• 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 / 4 or $space * 2

DRY code

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

Installing Sass

Head towards https://sass-lang.com/install to install Sass on your computer.