9.2 Sass vs SCSS vs Less

The Sass way

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 .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 provides1 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 http://sass-lang.com/install to install Sass on your computer.

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

Back to top

MarkSheet Video tutorials are coming!

Sign up for the MarkSheet newsletter to get notified!

Close