Sass Cheat Sheet

This cheat sheet condenses the most important syntax and patterns from every lesson in this course into one fast, scannable reference you can return to while building real projects.

How to Use This Cheat Sheet

Each table below groups related Sass syntax together, variables and modules, mixins and functions, control rules, and selectors, so you can quickly jump to the category you need without re-reading full lessons.

@use 'sass:math';
@use 'tokens';

.card {
  padding: tokens.$spacing-md;
  width: math.div(100%, 3);
}

A realistic line of modern SCSS touches several categories at once: modules, namespacing, and built-in functions.

Core Syntax at a Glance

$variable: value;
.selector { &:hover { ... } }
@use 'file' as ns;
@mixin name($param: default) { @content; }
@function name($param) { @return value; }

Variables ($name), nesting with &, and the module system form the foundation of everyday SCSS.
Mixins accept parameters and @content; functions must always @return a value.
Control rules (@if, @for, @each, @while) add logic to otherwise static stylesheets.
Refer back to the individual lessons in the sidebar for deeper explanations of any row below.

Variables, Modules, and Data Types

Core syntax for declaring values and loading files.

Feature	Syntax	Notes
Variable	`$name: value;`	Compile-time only, not a CSS custom property
Default value	`$name: value !default;`	Overridable by consumers before load
Load a module	`@use 'file';`	Namespace defaults to the filename
Aliased module	`@use 'file' as f;`	Custom, shorter namespace
Re-export	`@forward 'file';`	Passes members to consumers of this file
Map	`(key: value, key2: value2)`	Key-value structure, always comma-separated
List	`a, b, c` or `a b c`	Comma- or space-separated ordered values

Nesting and Selectors

Core patterns for the parent selector, interpolation, and shared styles.

Feature	Syntax	Notes
Nesting	`.a { .b { ... } }`	Compiles to `.a .b`
Parent selector	`&:hover`, `&.active`	References the enclosing selector
BEM element	`&__title`	Compiles to `.block__title`
BEM modifier	`&--large`	Compiles to `.block--large`
Interpolation	`.icon-#{$name}`	Injects a value into a selector or string
Placeholder	`%name { ... }`	Never output unless `@extend`ed
Extend	`@extend %name;`	Groups selectors instead of duplicating declarations

Mixins and Functions

Reference for defining and calling reusable logic.

Feature	Syntax	Notes
Define a mixin	`@mixin name($p: default) { ... }`	Outputs declarations
Call a mixin	`@include name($p: value);`	Positional or named arguments
Content block	`@include name { ... }`	Fills in `@content` inside the mixin
Define a function	`@function name($p) { @return v; }`	Returns exactly one value
Variable arguments	`@mixin name($rest...)`	Collects extra args into a list

Control Rules

Reference for conditionals and loops.

Rule	Syntax	Notes
Conditional	`@if $cond { ... } @else { ... }`	Only `false`/`null` are falsy
Counting loop	`@for $i from 1 through 3`	`through` is inclusive, `to` is exclusive
List/map loop	`@each $item in $list`	Or `@each $k, $v in $map`
Conditional loop	`@while $cond { ... }`	Manually managed exit condition
Diagnostics	`@debug`, `@warn`, `@error`	Increasing severity, `@error` halts compilation

Common Mistakes

Trying to memorize this entire cheat sheet instead of using it as a fast lookup while actively building.
Copying a syntax pattern without adjusting variable and namespace names to match your actual project.
Forgetting that this condensed view omits edge cases covered in the full individual lessons.
Not bookmarking the official Sass documentation alongside this page for anything not covered here.

Key Takeaways

This cheat sheet condenses variables, modules, selectors, mixins, functions, and control rules into one reference.
Use it as a fast lookup while building, not a replacement for understanding the underlying concepts.
Revisit the full lesson for any row when you need deeper context or edge-case handling.
The official Sass documentation remains the definitive source for anything not covered here.

Pro Tip

Bookmark this page alongside the official Sass documentation at sass-lang.com, this cheat sheet covers the syntax you'll use in the vast majority of everyday work, while the official docs cover every remaining edge case.

Colors, Numbers, and Strings Reference

Common sass:math, sass:color, and sass:string functions.

Function	Example	Result
`math.div()`	`math.div(100%, 3)`	33.3333%
`math.round()`	`math.round(4.6)`	5
`color.adjust()`	`color.adjust($c, $lightness: 10%)`	Lighter color
`color.scale()`	`color.scale($c, $lightness: 20%)`	Proportionally lighter
`color.mix()`	`color.mix($a, $b, 50%)`	Blended color
`string.to-upper-case()`	`string.to-upper-case("hi")`	"HI"
`map.get()`	`map.get($sizes, md)`	Value at key `md`
`list.nth()`	`list.nth((sm, md, lg), 2)`	md

Responsive and Architecture Reference

Common patterns for breakpoints, tokens, and folder structure.

Pattern	Example
Breakpoint map	`$breakpoints: (sm: 576px, md: 768px, lg: 992px);`
Query mixin	`@include respond-to(md) { ... }`
Fluid type	`font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);`
7-1 folder	`abstracts/, base/, components/, layout/, pages/, themes/, vendors/`
Custom property from Sass	`--color-primary: #{$primary};`