Going further with SCSS

Going further with SCSS is the next step after the beginner material. It assumes you have worked through An introduction to SCSS and are comfortable with variables, nesting, mixins, functions, partials, and compiling SCSS to CSS.

The beginner series taught you the syntax. These tutorials are about using SCSS on real projects: folder structure that scales, token systems for colour and spacing, mixins and functions used for the right jobs, and compiled CSS that does not start a specificity war.

We start with the 7-1 folder pattern and sane alternatives, then build token maps, responsive helpers, and light/dark theming. Later tutorials cover modern CSS features from SCSS, npm tooling, linting, and sharing styles across projects.

Where the intro series already explains something clearly, we will link back rather than repeat it. Those links appear only when they earn their place.

You need Node.js and a Sass compiler for most of these tutorials. VS Code with the Live Sass Compiler extension or a simple npm run watch script both work fine. Use whatever editor you like.

These tutorials end with two mini projects: a themeable component set and a refactor of messy CSS into maintainable SCSS. By then you should be able to structure a stylesheet folder, compile it reliably, and hand CSS to a colleague without apologising.

Work through the tutorials in order when you can. Each one builds on the last. If partials or mixins feel rusty, revisit the intro lesson first.