Sass/SCSS Cheatsheet - Sass Syntax & Mixin Reference
All essential Sass/SCSS commands organized by use case, with 40+ entries you can copy and run directly. Find the right command fast when you need it.
Back to Web ServicesVariables & Operations 5
$primary: #6366f1Define variable
color: $primaryUse variable
$primary: #6366f1 !defaultDefault value (kept if already set)
width: 100px + 50pxNumeric operation
content: "icon-#{$name}"Interpolation #{}
Maps & Color Functions 8
$sizes: (small: 12px, large: 24px)Map variable
width: map-get($sizes, small)Get map value
map-keys($sizes)All keys
map-merge($sizes, (medium: 16px))Merge maps
color: darken(#6366f1, 10%)Darken color
color: lighten(#6366f1, 10%)Lighten color
color: mix(red, blue)Mix two colors
color: rgba(#6366f1, 0.5)Set transparency
Nesting 4
nav { ul { margin: 0 } }Selector nesting
a { &:hover { color: red } }Pseudo-class nesting
.btn { &-primary { color: blue } }Parent ref (generates .btn-primary)
.box { @at-root .inner { } }Break out of nesting
Mixin & Inheritance 8
@mixin flex-center { display: flex; justify-content: center }Define mixin
@include flex-centerUse mixin
@mixin responsive($breakpoint) { @media ... }Mixin with params
@mixin button { @content }Accept content block
.btn { @include button { color: red } }Pass content block
%message-box { border: 1px solid }Placeholder selector
@extend %message-boxExtend 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
@else if $type == light { background: white }else if
@else { background: gray }else
@warn "变量未定义"Warning output
@error "参数错误"Error output (stops compile)
Imports & Modules 6
@import "variables"Import file (legacy)
@use "variables" as *Use module (recommended)
@use "variables" as varsUse with namespace
@use "config" with ($primary: red)Configure !default vars
@forward "variables"Forward module
@import url("https://fonts.googleapis.com")Import external CSS
💡 Tips
- SCSS 语法（.scss）兼容 CSS，Sass 语法（.sass）用缩进，推荐用 SCSS。
- @use 是 Sass 推荐的新模块化方式，比 @import 更清晰。
- Mixin 适合复用代码块，% 占位符适合复用样式（不生成多余代码）。
Official References
Commands are compiled from the official docs below. Click to verify the latest usage.
Maintained by LaoHand
Publicly updated on Jul 21, 2026, continuously proofread against official docs.
Found an error? Report it
Wrong command or description? Open an issue to help us fix it.
Found an error? Report it