Contents
Sass
A CSS preprocessor: variables, nesting, mixins, functions and modules.
1.Getting started
- What is SassWhat a CSS preprocessor is, why Sass is still useful next to modern CSS, and how SCSS differs from the indented syntax.
- Installing and compilingHow to install Dart Sass with npm, compile a file with the sass command, watch for changes and use source maps.
- Sass with ViteHow to use SCSS in a Vite project: installing the compiler, importing a .scss file and building for production.
2.Language basics
- VariablesSass variables with the $ sign, their scope, and how they differ from CSS custom properties.
- Nesting and the & selectorNested rules in Sass, the parent selector & for states, modifiers and BEM suffixes, nested media queries, and how it differs from native CSS nesting.
- Operators and mathArithmetic in Sass, units, division with math.div, rounding and other functions of the sass:math module, and when to use calc() instead.
3.Files and modules
- Partials and file structureSplitting styles into partial files with an underscore, joining them into one CSS file, and a simplified 7-1 folder structure.
- @use and namespacesHow @use loads a module, namespaces and aliases, private members, and configuring a module with !default and with.
- @forward and index filesHow @forward passes members of several files through one module, how _index.scss lets you load a whole folder, and how to limit forwarded members.
4.Reusing code
- MixinsReusable groups of declarations with @mixin and @include, arguments, default values and named arguments.
- Content blocks: @contentPassing a whole block of styles into a mixin with @content, using a breakpoint mixin as an example.
- @extend and placeholdersSharing styles between selectors with @extend, placeholder selectors with %, and why @extend needs care.
- FunctionsYour own Sass functions with @function and @return, arguments with default values, and the difference between a function and a mixin.
5.Built-in modules
- The sass:color moduleMaking lighter, darker and transparent shades of a colour with color.adjust, color.scale, color.change and color.mix.
- The sass:string and sass:list modulesWorking with strings and lists in Sass: quotes, length, slices, list items, appending and joining lists.
- Maps and the sass:map moduleStoring named values in Sass maps, reading them with map.get, checking keys, merging maps, and a breakpoint mixin built on a map.
6.Conditions and loops
- Conditions: @if and @elseChoosing styles at compile time with @if, @else if and @else, comparison and logical operators, and what Sass considers true.
- Loops: @each and @forGenerating utility classes with @each over lists and maps, counting with @for, and inserting values into selectors with interpolation.
- @debug, @warn and @errorPrinting values while compiling with @debug, warning about questionable arguments with @warn, and stopping the build with a clear message using @error.
7.Sass in a real project
- Design tokens in mapsKeeping the site's colours, spacing and radii as design tokens in Sass maps, reading them through small functions and generating classes from them.
- Organising a real projectPutting the pieces together: folders, index files, the order of @use in main.scss and the rules that keep a Sass project easy to maintain.
- Sass and custom properties for themesCombining Sass maps with CSS custom properties: generating theme variables with a loop and switching a light and dark theme in the browser.
- Migrating from @import to @useWhy @import is deprecated in Sass, how old code differs from the module system, and how to convert a project with the sass-migrator tool.
- Production build and common mistakesCompiling compressed CSS for publishing, npm scripts for development and build, and a checklist of the most frequent Sass mistakes.