9.2 Sass vs SCSS vs Less

优质

小牛编辑

130浏览

2023-12-01

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.

and any CSS preprocessor for that matter, but I’ll refer to Sass only from now on. ↩