Sass/SCSS Cheatsheet - Sass Syntax & Mixin Reference

For developers whose stylesheets have grown hard to maintain. Sass turns repeated declarations into variables and mixins, so a change in one place propagates everywhere instead of a find-and-replace. By the end you can centralize values and shared snippets in variables and mixins, generate repetitive rules with loops, and reuse layout blocks with @extend without duplicating CSS.

Web Services·40 commands·Last updated 2026-07-21

Variables & Operations 5

$primary: #6366f1

Define a variable

color: $primary

Use a variable

$primary: #6366f1 !default

Default value (kept if already defined)

width: 100px + 50px

Numeric operations

content: "icon-#{$name}"

Interpolation with #{}

Maps & Color Functions 8

$sizes: (small: 12px, large: 24px)

Map variable

width: map-get($sizes, small)

Get a map value

map-keys($sizes)

All keys

map-merge($sizes, (medium: 16px))

Merge maps

color: darken(#6366f1, 10%)

Darken a color

color: lighten(#6366f1, 10%)

Lighten a color

color: mix(red, blue)

Mix two colors

color: rgba(#6366f1, 0.5)

Set opacity

Nesting 4

nav { ul { margin: 0 } }

Selector nesting

a { &:hover { color: red } }

Pseudo-class nesting

.btn { &-primary { color: blue } }

Parent selector reference (yields .btn-primary)

.box { @at-root .inner { } }

Break out of nesting (@at-root)

Mixins & Inheritance 8

@mixin flex-center { display: flex; justify-content: center }

Define a mixin

@include flex-center

Use a mixin

@mixin responsive($breakpoint) { @media ... }

Mixin with parameters

@mixin button { @content }

Mixin that accepts a content block

.btn { @include button { color: red } }

Pass a content block

%message-box { border: 1px solid }

Define a placeholder selector

@extend %message-box

Extend a placeholder

.error { @extend %message-box }

Inherit styles

Functions & Loops 4

@function px-to-rem($px) { @return $px / 16 * 1rem }

Custom function

@for $i from 1 through 3 { .col-#{$i} { } }

for loop

@each $color in red, blue, green { .#{$color} { } }

each loop

@while $i > 0 { .item-#{$i} { } $i: $i - 1 }

while loop

Conditionals & Control 5

@if $type == dark { background: black }

Conditional (@if)

@else if $type == light { background: white }

@else if

@else { background: gray }

@else

@warn "Variable not defined"

Warning output

@error "Invalid argument"

Error output (stops compilation)

Imports & Modules 6

@import "variables"

Import a file (legacy syntax)

@use "variables" as *

Use a module (recommended)

@use "variables" as vars

Use with a namespace

@use "config" with ($primary: red)

Configure a module's !default vars

@forward "variables"

Forward a module

@import url("https://fonts.googleapis.com")

Import external CSS

Tips

SCSS (.scss) is CSS-compatible, while Sass (.sass) uses indentation. SCSS is recommended.
@use is Sass's modern module system and is clearer than the legacy @import.
Use mixins to reuse code blocks; use % placeholder selectors to reuse styles without emitting duplicate CSS.

Official References

Each command links to its official documentation below, so you can verify the latest usage and read deeper.

Sass Docs

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.