Sass Reference

This section documents Sass/SCSS as implemented by Dart Sass, the current official and actively maintained compiler — it is not tied to any specific book, build tool, or CSS framework (Bootstrap, Bulma, etc.). Unlike the other reference sections on this site, no single reference book underpins it: the content was generated with the assistance of AI from general knowledge of Dart Sass, and should be verified against the current official documentation at sass-lang.com before relying on it in production. Sass continues to evolve, so behaviour described here may lag the compiler you are actually running.

This section’s bibliography lists the reference material consulted while preparing these pages.

Welcome to the SASS reference. Sass is a CSS preprocessor: it adds variables, nesting, mixins, functions, and a real module system on top of CSS, then compiles down to the plain CSS browsers understand. This section is organized by topic, from the two syntaxes through the language features to the build step that turns it all into CSS, so you can jump straight to what you need, or work through it top to bottom as a refresher.

If you are new to Sass, read Syntax and Variables first, then Compilation to get a build running.

What’s covered

  • Syntax: SCSS vs. Sass — the two syntaxes Dart Sass accepts, the same stylesheet written both ways, why SCSS is the practical default, and Sass’s silent // comments.

  • Variables — $name: value declarations, global vs. local scope and the !global flag, overridable defaults with !default, and how Sass variables differ from CSS custom properties.

  • Nesting — nested selectors and how they flatten, the & parent selector for pseudo-classes and BEM-style suffixes, nested properties and media queries, and how this compares to native CSS nesting.

  • Partials & Modules — _partial.scss files, loading modules with @use (namespaces, as, with), re-exporting with @forward (show/hide, prefixes), and why @import is deprecated.

  • Mixins — @mixin/@include, positional and named arguments, default values, variadic $args…​, and passing content blocks with @content.

  • Functions — @function/@return, how functions differ from mixins, purity, and reporting problems with @error/@warn/@debug.

  • Selector Inheritance (@extend) — how @extend merges selectors rather than copying declarations, %placeholder targets, a side-by-side comparison with mixins, and the media-query and selector-bloat caveats.

  • Operators — arithmetic and unit handling, the math.div() rule that replaces / for division, string concatenation, comparison and boolean operators, and Sass’s truthiness rules.

  • Control Flow — @if/@else if/@else, @for (through vs. to), @each over lists and maps with destructuring, and @while, with utility-class generation examples.

  • Lists & Maps — 1-indexed lists and the sass:list functions, map syntax and sass:map lookups including nested keys, immutability, and a worked responsive-breakpoints example.

  • Built-in Modules — the sass:math, sass:color, sass:list, sass:map, sass:string, sass:selector, and sass:meta modules, and the deprecated global functions they replace.

  • Compilation — why Sass must be compiled, Dart Sass vs. the deprecated LibSass/node-sass and Ruby Sass, the sass CLI and its flags, output styles, source maps, and Vite/Webpack integration.

  • Cheat sheet — a one-page, downloadable PDF summary of the essentials above for quick memorization.

Bibliography

  • Sass — the official project site, and the primary reference for this entire section. See in particular the Sass documentation for the full language reference, the built-in module index, and Dart Sass for the current official implementation.

  • MDN Web Docs — the general reference used for the underlying CSS that Sass compiles to, including native CSS nesting and custom properties.