Sass/SCSS Cheatsheet - Sass Syntax & Mixin Reference
写样式必备的 Sass/SCSS 速查表，从变量到 Mixin，按语法分类整理，写 SCSS 时直接参考。
Back to Web Services变量与运算 5
$primary: #6366f1定义变量
color: $primary使用变量
$primary: #6366f1 !default默认值（已定义则不覆盖）
width: 100px + 50px数值运算
content: "icon-#{$name}"插值 #{}
Map 与颜色函数 8
$sizes: (small: 12px, large: 24px)Map 变量
width: map-get($sizes, small)获取 Map 值
map-keys($sizes)所有键
map-merge($sizes, (medium: 16px))合并 Map
color: darken(#6366f1, 10%)加深颜色
color: lighten(#6366f1, 10%)提亮颜色
color: mix(red, blue)混合两种颜色
color: rgba(#6366f1, 0.5)设置透明度
嵌套 4
nav { ul { margin: 0 } }选择器嵌套
a { &:hover { color: red } }伪类嵌套
.btn { &-primary { color: blue } }父选择器引用（生成 .btn-primary）
.box { @at-root .inner { } }跳出嵌套
Mixin 与继承 8
@mixin flex-center { display: flex; justify-content: center }定义 Mixin
@include flex-center使用 Mixin
@mixin responsive($breakpoint) { @media ... }带参数的 Mixin
@mixin button { @content }接收内容块
.btn { @include button { color: red } }传入内容块
%message-box { border: 1px solid }定义占位符选择器
@extend %message-box继承占位符
.error { @extend %message-box }继承样式
函数与循环 4
@function px-to-rem($px) { @return $px / 16 * 1rem }自定义函数
@for $i from 1 through 3 { .col-#{$i} { } }for 循环
@each $color in red, blue, green { .#{$color} { } }each 循环
@while $i > 0 { .item-#{$i} { } $i: $i - 1 }while 循环
条件与控制 5
@if $type == dark { background: black }条件判断
@else if $type == light { background: white }else if
@else { background: gray }else
@warn "变量未定义"警告输出
@error "参数错误"错误输出（终止编译）
引入与模块化 6
@import "variables"导入文件（老语法）
@use "variables" as *使用模块（推荐）
@use "variables" as vars带命名空间使用
@use "config" with ($primary: red)配置模块的 !default 变量
@forward "variables"转发模块
@import url("https://fonts.googleapis.com")导入外部 CSS
💡 Tips
- SCSS 语法（.scss）兼容 CSS，Sass 语法（.sass）用缩进，推荐用 SCSS。
- @use 是 Sass 推荐的新模块化方式，比 @import 更清晰。
- Mixin 适合复用代码块，% 占位符适合复用样式（不生成多余代码）。