What is Sass

Sass is a CSS preprocessor: a program that takes styles written in an extended language and turns them into plain CSS. You write variables, mixins, functions and loops; Sass turns them into ordinary rules, and the browser only ever receives the finished CSS. This turning is called compiling.

This course uses Dart Sass 1.80 or newer — the official and only maintained implementation. The older LibSass and the node-sass package are deprecated; do not install them.

From SCSS to CSS

Here is a small Sass file. It stores the brand colour in a variable and nests the hover state inside the button rule:

// styles/main.scss
$primary: #2563eb;
 
.btn {
  padding: 8px 16px;
  color: white;
  background: $primary;
 
  &:hover {
    background: black;
  }
}

What the browser gets after compiling:

.btn {
  padding: 8px 16px;
  color: white;
  background: #2563eb;
}
.btn:hover {
  background: black;
}

The variable is gone — its value was substituted — and the nested rule became a separate .btn:hover rule. The result works in any browser:

<style>
  .btn {
    padding: 8px 16px;
    color: white;
    background: #2563eb;
  }
  .btn:hover {
    background: black;
  }
</style>
 
<button class="btn">Sign up</button>

Hover over the button: its background turns black.

Two syntaxes

Sass understands two ways of writing the same thing:

The same button in the indented syntax:

// styles/main.sass
$primary: #2563eb
 
.btn
  padding: 8px 16px
  background: $primary

Any valid CSS file is also a valid SCSS file, so you can rename style.css to style.scss and add Sass features step by step. That is why almost every project uses SCSS, and so does this course.

Is Sass still needed?

Modern CSS has borrowed some ideas from Sass: custom properties (--primary) and native nesting. What Sass still adds:

• mixins and functions — reusable pieces of styles and calculations;
• loops and conditions — generating dozens of utility classes from one list;
• modules — splitting styles into many files that become one CSS file;
• compile-time checks — a typo in a variable name is an error, not silently broken styles.

The two work well together: Sass organises the code, custom properties change values in the browser. A later lesson shows how to combine them.

Common mistake

The browser does not understand SCSS. A link to the source file does nothing:

<link rel="stylesheet" href="styles/main.scss">
<p>The styles are not applied.</p>

Always link the compiled .css file. The next lesson shows how to get it.