Sass 常用语法速查表
把 Sass/SCSS 日常开发最常用的语法整理成速查，写样式时对照查。
返回 Web 服务变量与运算 6
$primary: #6366f1定义变量
color: $primary使用变量
$sizes: (small: 12px, large: 24px)Map 变量
width: map-get($sizes, small)获取 Map 值
width: 100px + 50px数值运算
color: darken(#6366f1, 10%)颜色函数
嵌套 4
nav { ul { margin: 0 } }选择器嵌套
a { &:hover { color: red } }伪类嵌套
.btn { &-primary { color: blue } }父选择器引用（生成 .btn-primary）
.box { @at-root .inner { } }跳出嵌套
Mixin 与继承 6
@mixin flex-center { display: flex; justify-content: center }定义 Mixin
@include flex-center使用 Mixin
@mixin responsive($breakpoint) { @media ... }带参数的 Mixin
%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 "参数错误"错误输出（终止编译）
引入与模块化 5
@import "variables"导入文件（老语法）
@use "variables" as *使用模块（推荐）
@use "variables" as vars带命名空间使用
@forward "variables"转发模块
@import url("https://fonts.googleapis.com")导入外部 CSS
💡 提示
- SCSS 语法（.scss）兼容 CSS，Sass 语法（.sass）用缩进，推荐用 SCSS。
- @use 是 Sass 推荐的新模块化方式，比 @import 更清晰。
- Mixin 适合复用代码块，% 占位符适合复用样式（不生成多余代码）。