An introduction to SASS

SCSS (Sassy CSS) – an extension of CSS that adds variables, nesting, mixins, and other features to make stylesheets easier to write and maintain. Browsers still only understand plain CSS, so SCSS is compiled down before your site goes live.

If you have worked with CSS for any length of time, you will know the pain of repeating the same colour codes, font stacks, and spacing values across hundreds of lines. SCSS lets you define those once and reuse them. Change a variable and the update ripples through the whole stylesheet.

SCSS builds on what you already know about CSS rather than replacing it. The syntax is familiar, and valid CSS is valid SCSS. You get a more structured way to organise your styles – breaking them into reusable, modular pieces – without learning an entirely new language.

This series walks through SCSS from the basics to practical use in real projects. We will cover the syntax, the main features, and how to fit it into your workflow.

Each article includes examples and scenarios you are likely to run into, so you can start using SCSS in your own work without wading through theory for its own sake.