Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that extends standard CSS with programming features like variables, nesting, mixins, and functions. It compiles to plain CSS at build time, enabling developers to write more maintainable stylesheets with reusable code patterns and advanced logic. While modern CSS has adopted features like custom properties and nesting, Sass remains valuable for complex projects requiring loops, conditionals, and compile-time transformations—though choosing between Sass and vanilla CSS increasingly depends on whether you need static compile-time processing or runtime flexibility.
What This Cheat Sheet Covers
This topic spans 22 focused tables and 115 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Variables and Scope
Variables store reusable values throughout your stylesheet—Sass variables compile at build time as static constants, while CSS custom properties remain dynamic at runtime. Understanding scope rules, the !default flag, and !global modifier prevents conflicts in larger codebases.
| Feature | Example | Description |
|---|---|---|
$primary-color: #3498db;.btn { color: $primary-color; } | • Stores a value for reuse • compile-time constant resolved during build | |
:root { --primary: #3498db; }.btn { color: var(--primary); } | Native CSS variable that cascades and can be changed at runtime | |
$width: 100px;.box { $width: 50px; } | • Variables declared inside blocks are local scope • outer declarations remain unchanged | |
$base-font: 16px !default; | • Assigns value only if variable is undefined or null • enables safe configuration |