Sass Tutorial

Sass is a language that adds useful features to CSS, such as variables, nesting, reusable blocks of styles and functions. You write Sass, and a tool called the Sass compiler turns it into normal CSS that browsers understand.

Most developers use the SCSS syntax of Sass. It looks almost exactly like CSS, so if you know CSS, you can start straight away.

Why Learn Sass?

• Keep colours, fonts and sizes in variables and change them in one place
• Nest rules to match the structure of your HTML, with less repeating
• Split big style sheets into small, tidy files
• Reuse groups of styles with mixins, and calculate values with functions
• Bootstrap and many other frameworks are written in Sass, so you can customise them

You should know CSS well before you start this tutorial.

A Quick Example

Every example in this tutorial shows the SCSS you write, followed by the CSS the compiler makes from it.

$brand: #cc6699;

.button {
  background-color: $brand;

  &:hover {
    opacity: 0.8;
  }
}

.button {
  background-color: #cc6699;
}
.button:hover {
  opacity: 0.8;
}

What You Will Learn

• What Sass is and how to compile SCSS into CSS
• Variables and simple maths
• Nesting and the & parent selector
• Partials and modules with @use and @forward
• Mixins with @mixin and @include
• @extend, functions, loops and conditions

What to Learn Next

Use Sass to customise Bootstrap, compare it with the utility approach of Tailwind CSS, and learn JavaScript to add interaction to your pages.