CSS Preprocessors: SASS/SCSS

What are SASS and SCSS?

SASS (Syntactically Awesome Style Sheets) is a CSS preprocessor that adds features missing from standard CSS, such as variables, nesting, mixins, and more. SASS has two syntaxes:

SASS syntax (older) uses indentation instead of curly braces and semicolons.
SCSS syntax (newer) is more similar to traditional CSS, using curly braces {} and semicolons ;.

SCSS is the more commonly used syntax today because of its similarity to CSS, so we’ll focus on SCSS in this guide.

Example of SCSS:

$primary-color: #3498db;

body {
  background-color: $primary-color;
  font-size: 16px;

  h1 {
    color: darken($primary-color, 10%);
  }
}

Example of SASS:

$primary-color: #3498db

body
  background-color: $primary-color
  font-size: 16px

  h1
    color: darken($primary-color, 10%)