📖 Guide
Sass — Complete Reference
Comprehensive Sass/SCSS cheat sheet covering variables, mixins, functions, nesting, and the modern module system.
74 commands across 11 categories
VariablesNestingMixinsFunctionsExtends & PlaceholdersPartials & ImportsOperatorsControl DirectivesMapsBuilt-in ModulesCommon Patterns
Variables
| Command | Description |
|---|---|
$color: #3498db; | Declare a variable |
$font-stack: 'Helvetica', sans-serif; | Variable with font stack |
$size: 16px !default; | Default value — only set if not already defined |
$map: (sm: 576px, md: 768px); | Map variable for key-value pairs |
#{$variable}e.g. .icon-#{$name} { ... } | Interpolation — use variable in selectors/properties |
$global-var: red !global; | Set a variable in global scope from inside a block |
Nesting
| Command | Description |
|---|---|
.nav { ul { ... } li { ... } } | Nest selectors to mirror HTML structure |
&:hover { ... }e.g. .btn { &:hover { bg: blue; } } // .btn:hover | Parent selector — reference enclosing selector |
&--modifier { ... }e.g. .card { &--featured { ... } } // .card--featured | BEM modifier with parent selector |
&__element { ... } | BEM element with parent selector |
font: { size: 14px; weight: bold; } | Property nesting for namespaced CSS properties |
@at-root .child { ... } | Break out of nesting to root level |
Mixins
| Command | Description |
|---|---|
@mixin name { ... } | Define a mixin (reusable block of styles) |
@include name; | Use a mixin |
@mixin name($param) { ... } | Mixin with parameter |
@mixin name($color: blue) { ... } | Mixin with default parameter value |
@mixin name($props...) { ... }e.g. @mixin shadow($shadows...) { box-shadow: $shadows; } | Mixin with variable arguments |
@content;e.g. @mixin media($bp) { @media (min-width: $bp) { @content; } } | Content block — inject caller's styles |
@include media(768px) { font-size: 18px; } | Pass content block to mixin |
Functions
| Command | Description |
|---|---|
@function name($param) { @return value; } | Define a custom function |
@return $value; | Return a value from function |
width: percentage(0.5); | Call a function (built-in: returns 50%) |
@function px-to-rem($px) {\n @return $px / 16px * 1rem;\n} | Example: pixel to rem converter |
lighten($color, 20%) | Built-in: lighten a color |
darken($color, 10%) | Built-in: darken a color |
mix($color1, $color2, 50%) | Built-in: mix two colors |
rgba($color, 0.5) | Built-in: set alpha on a color |
Extends & Placeholders
| Command | Description |
|---|---|
@extend .other-class; | Inherit styles from another selector |
%placeholder { ... } | Placeholder selector — only output when extended |
@extend %placeholder; | Extend a placeholder (no unused CSS output) |
@extend .class !optional; | Don't error if extended selector doesn't exist |
%flex-center {\n display: flex;\n align-items: center;\n justify-content: center;\n} | Example: reusable placeholder for centering |
Partials & Imports
| Command | Description |
|---|---|
_partial.scss | Partial file — prefixed with _ (not compiled on its own) |
@use 'partial'; | Load a module (modern, recommended over @import) |
@use 'colors' as c;e.g. color: c.$primary; | Namespace a module |
@use 'theme' as *; | Load without namespace (use members directly) |
@forward 'colors'; | Re-export another module's members |
@forward 'colors' show $primary, $secondary; | Forward only specific members |
@import 'file'; | Legacy import (deprecated, avoid in new code) |
Operators
| Command | Description |
|---|---|
width: 100% - 20px; | Math with compatible units |
font-size: 16px * 1.5; | Multiplication |
width: math.div(100%, 3); | Division (use math.div, / is deprecated for division) |
== and != | Equality comparison operators |
and or not | Boolean operators for conditionals |
+ for stringse.g. 'hello' + ' world' // 'hello world' | String concatenation |
Control Directives
| Command | Description |
|---|---|
@if $cond { } @else if $c2 { } @else { } | Conditional logic |
@for $i from 1 through 12 { ... }e.g. .col-#{$i} { width: 100% / 12 * $i; } | For loop (inclusive of end) |
@for $i from 1 to 12 { ... } | For loop (exclusive of end value) |
@each $item in $list { ... }e.g. @each $color in red, green, blue { .text-#{$color} { color: $color; } } | Iterate over a list |
@each $key, $val in $map { ... } | Iterate over map key-value pairs |
@while $i > 0 { ... $i: $i - 1; } | While loop (use carefully) |
@warn 'message'; | Print warning during compilation |
@error 'message'; | Stop compilation with error message |
Maps
| Command | Description |
|---|---|
$map: (key1: val1, key2: val2); | Define a map |
map.get($map, key) | Get value by key (null if not found) |
map.has-key($map, key) | Check if key exists |
map.keys($map) | Get list of all keys |
map.values($map) | Get list of all values |
map.merge($map1, $map2) | Merge two maps (second overrides first) |
map.remove($map, key) | Return new map without specified key |
Built-in Modules
| Command | Description |
|---|---|
@use 'sass:math'; | Math functions (div, ceil, floor, round, percentage) |
@use 'sass:color'; | Color functions (adjust, scale, mix, complement) |
@use 'sass:string'; | String functions (quote, unquote, index, slice) |
@use 'sass:list'; | List functions (nth, append, join, length) |
@use 'sass:map'; | Map functions (get, merge, keys, values) |
@use 'sass:meta'; | Meta functions (type-of, inspect, mixin-exists) |
@use 'sass:selector'; | Selector manipulation (nest, append, replace) |
math.ceil(4.2) math.floor(4.8) | Round up / round down |
Common Patterns
| Command | Description |
|---|---|
@mixin respond-to($bp) {\n @media (min-width: map.get($bps, $bp)) { @content; }\n} | Responsive breakpoint mixin |
@mixin visually-hidden {\n position: absolute; width: 1px; height: 1px;\n overflow: hidden; clip: rect(0,0,0,0);\n} | Screen-reader-only visually hidden mixin |
@mixin truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n} | Text truncation with ellipsis |
@each $name, $color in $colors {\n .bg-#{$name} { background: $color; }\n} | Generate utility classes from a map |
@for $i from 1 through 5 {\n .mt-#{$i} { margin-top: $i * 0.25rem; }\n} | Generate spacing utility classes |
:root {\n @each $name, $val in $colors {\n --color-#{$name}: #{$val};\n }\n} | Generate CSS custom properties from Sass map |
📖 Free, searchable command reference. Bookmark this page for quick access.