SASS Cheat Sheet

Free

A searchable, printable Sass / SCSS reference — variables, nesting, @use modules, mixins, functions, control flow and built-in modules. Free.

Variables

$primary: #1d6f42;

Declare a variable

$radius: 4px !default;

Set only if not already defined

$theme: dark !global;

Assign to the global scope from inside a block

.box { $w: 10px; width: $w; }

Local variable, scoped to the block

$font-stack: 'Inter', sans-serif;

String / list value

$gap: 8px * 2;

Variables can hold computed values

color: $primary;

Use a variable as a property value

$sizes: 4px, 8px, 16px;

A comma-separated list variable

$config: ('gap': 8px);

A map variable (key/value pairs)

$on: true;

Boolean variable for control flow

Nesting

.card { .title { color: red; } }

Nest a selector inside its parent

.btn { &:hover { opacity: .8; } }

& refers to the parent selector

.btn { &.is-active {} }

Compound parent selector with &

.list { & + & { margin-top: 8px; } }

Adjacent-sibling rule using &

.menu { .dark & { color: #fff; } }

Place & last to prepend a context

.box { font: { size: 14px; weight: 700; } }

Nested properties for a namespace (font-*)

.grid { > .col {} }

Nested child combinator

@media (min-width: 768px) { .col { width: 50%; } }

Nest media queries inside a rule too

.a { color: red; .b & { color: blue; } }

Reorder context by moving &

Partials & modules

_base.scss

Partial file (leading underscore, not compiled alone)

@use 'base';

Load a module (namespaced by file name)

base.$primary;

Access a member through its namespace

@use 'base' as b;

Load a module under a custom namespace

@use 'base' as *;

Load into the global namespace (no prefix)

@use 'theme' with ($primary: #000);

Configure a module's !default variables on load

@forward 'buttons';

Re-export a module from an entrypoint

@forward 'buttons' as btn-*;

Forward members with a prefix

@forward 'src/list' hide list-reset;

Forward but hide specific members

@forward 'config' with ($gap: 4px !default);

Forward and set configurable defaults

Mixins

@mixin reset { margin: 0; padding: 0; }

Define a reusable block of declarations

@include reset;

Apply a mixin

@mixin pad($x) { padding: $x; }

Mixin with an argument

@include pad(8px);

Pass an argument when including

@mixin pad($x: 4px) { padding: $x; }

Argument with a default value

@include pad($x: 12px);

Pass an argument by keyword

@mixin shadow($a...) { box-shadow: $a; }

Arbitrary (variable) arguments

@mixin card { border: 1px solid; @content; }

Accept a @content block

@include card { color: red; }

Pass a block into the mixin's @content

@mixin on-dark { @content; }

Wrap arbitrary rules passed via @content

Functions

@function double($n) { @return $n * 2; }

Define a function that returns a value

width: double(8px);

Call a custom function

@function pad($x: 4px) { @return $x; }

Function with a default argument

@function sum($a, $b) { @return $a + $b; }

Multiple arguments

@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }

Functions may contain control flow

@use 'sass:math';

Import a built-in module for use in functions

@function half($n) { @return math.div($n, 2); }

Use module functions inside your own

@function list-len($l) { @return list.length($l); }

Functions can wrap built-ins

margin: sum(4px, 8px);

Use the returned value as a property value

Operators & math

@use 'sass:math';

Load the math module for division

width: math.div(100%, 3);

Division (math.div, not the deprecated /)

width: 100% - 20px;

Subtraction

margin: 4px + 4px;

Addition

width: 2 * 8px;

Multiplication

$r: 10 % 3;

Modulo (remainder)

@if $a == $b {}

Equality comparison

@if $a >= 768px {}

Greater-than-or-equal comparison

@if $a and $b {}

Logical and

@if not $disabled {}

Logical negation

Control flow

@if $on { display: block; }

Conditional block

@else if $alt { display: flex; }

Additional condition

@else { display: none; }

Fallback branch

@each $c in red, green, blue {}

Iterate over a list

@each $name, $val in $map {}

Iterate over a map's keys and values

@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }

Generate rules from a map

@for $i from 1 through 3 {}

Loop inclusive of the end value

@for $i from 0 to 3 {}

Loop exclusive of the end value

@while $i > 0 { $i: $i - 1; }

Loop while a condition holds

Built-in modules

@use 'sass:math'; math.floor(4.7)

Round down to the nearest integer

math.ceil(4.1)

Round up to the nearest integer

math.round(4.5)

Round to the nearest integer

math.percentage(math.div(1, 4))

Convert a unitless ratio to a percentage

@use 'sass:string'; string.to-upper-case('hi')

Uppercase a string

string.quote(hello)

Wrap a value in quotes

@use 'sass:color'; color.adjust($c, $lightness: 10%)

Adjust a colour channel by an amount

color.scale($c, $lightness: 20%)

Scale a colour channel fluidly

color.mix($a, $b, 50%)

Blend two colours

@use 'sass:list'; list.length($l)

Number of items in a list

list.nth($l, 1)

Get the nth item (1-based)

@use 'sass:map'; map.get($m, 'gap')

Read a value from a map by key

map.merge($a, $b)

Merge two maps

map.keys($m)

Get a list of a map's keys

Placeholders & inheritance

%card { border: 1px solid; }

Placeholder selector (not output on its own)

.box { @extend %card; }

Inherit a placeholder's styles

.alert { color: red; }

A normal selector to extend

.error { @extend .alert; }

Extend a real selector

.note { @extend .alert !optional; }

!optional: do not error if the target is missing

%btn-base { padding: 8px; }

Share a base across many buttons

.btn-primary { @extend %btn-base; }

Multiple selectors share one rule via @extend

.btn-ghost { @extend %btn-base; }

Each extension is grouped in the output

@include card;

Prefer mixins over @extend for parameterised reuse

Interpolation & misc

.icon-#{$name} { content: ''; }

Interpolate a variable into a selector

width: calc(100% - #{$gap});

Interpolate a Sass value inside calc()

content: '#{$count} items';

Interpolate inside a string

--bs-#{$key}: #{$val};

Build CSS custom properties dynamically

$map: ('sm': 576px, 'md': 768px);

Define a map of key/value pairs

map.get($map, 'md')

Read a map value (via sass:map)

@debug $value;

Print a value to the console while compiling

@warn 'deprecated';

Emit a compile-time warning

@error 'invalid input';

Abort compilation with an error

// inline comment

Silent comment (stripped from output)

/* block comment */

CSS comment (kept in compressed output if /*! )

@import 'base';

Legacy import — deprecated, prefer @use / @forward

No entry matches “:q”.

Need help?

Found an issue with this tool? Let our team know.

Report an issue

Add this free tool to your own website — copy and paste the code below.

<iframe src="https://tweakee.com/studio/dev/sass-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>