SASS 速查表
可搜索、可打印的 Sass / SCSS 参考手册——变量、嵌套、@use 模块、混入、函数、控制流以及内置模块。免费。
变量
10$primary: #1d6f42;
声明变量
$radius: 4px !default;
仅在未定义时设置
$theme: dark !global;
在块内向全局作用域赋值
.box { $w: 10px; width: $w; }
局部变量，作用域限于块
$font-stack: 'Inter', sans-serif;
字符串/列表值
$gap: 8px * 2;
变量可保存计算值
color: $primary;
将变量用作属性值
$sizes: 4px, 8px, 16px;
逗号分隔的列表变量
$config: ('gap': 8px);
映射变量（键/值对）
$on: true;
用于控制流的布尔变量
嵌套
9.card { .title { color: red; } }
在父级内嵌套选择器
.btn { &:hover { opacity: .8; } }
& 指代父选择器
.btn { &.is-active {} }
用 & 组合父选择器
.list { & + & { margin-top: 8px; } }
用 & 的相邻兄弟规则
.menu { .dark & { color: #fff; } }
将 & 放在末尾以前置上下文
.box { font: { size: 14px; weight: 700; } }
命名空间的嵌套属性（font-*）
.grid { > .col {} }
嵌套的子代组合器
@media (min-width: 768px) { .col { width: 50%; } }
也可在规则内嵌套媒体查询
.a { color: red; .b & { color: blue; } }
通过移动 & 重排上下文
局部文件与模块
10_base.scss
局部文件（前置下划线，不单独编译）
@use 'base';
加载模块（按文件名设命名空间）
base.$primary;
通过命名空间访问成员
@use 'base' as b;
在自定义命名空间下加载模块
@use 'base' as *;
加载到全局命名空间（无前缀）
@use 'theme' with ($primary: #000);
加载时配置模块的 !default 变量
@forward 'buttons';
从入口点重新导出模块
@forward 'buttons' as btn-*;
带前缀转发成员
@forward 'src/list' hide list-reset;
转发但隐藏特定成员
@forward 'config' with ($gap: 4px !default);
转发并设置可配置默认值
混入（Mixin）
10@mixin reset { margin: 0; padding: 0; }
定义可复用的声明块
@include reset;
应用混入
@mixin pad($x) { padding: $x; }
带参数的混入
@include pad(8px);
包含时传递参数
@mixin pad($x: 4px) { padding: $x; }
带默认值的参数
@include pad($x: 12px);
按关键字传递参数
@mixin shadow($a...) { box-shadow: $a; }
任意（可变）参数
@mixin card { border: 1px solid; @content; }
接受 @content 块
@include card { color: red; }
向混入的 @content 传入块
@mixin on-dark { @content; }
包裹通过 @content 传入的任意规则
函数
9@function double($n) { @return $n * 2; }
定义返回值的函数
width: double(8px);
调用自定义函数
@function pad($x: 4px) { @return $x; }
带默认参数的函数
@function sum($a, $b) { @return $a + $b; }
多个参数
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
函数可包含控制流
@use 'sass:math';
导入内置模块以在函数中使用
@function half($n) { @return math.div($n, 2); }
在自定义函数中使用模块函数
@function list-len($l) { @return list.length($l); }
函数可封装内置功能
margin: sum(4px, 8px);
将返回值用作属性值
运算符与数学
10@use 'sass:math';
加载 math 模块用于除法
width: math.div(100%, 3);
除法（math.div，而非已弃用的 /）
width: 100% - 20px;
减法
margin: 4px + 4px;
加法
width: 2 * 8px;
乘法
$r: 10 % 3;
取模（余数）
@if $a == $b {}
相等比较
@if $a >= 768px {}
大于等于比较
@if $a and $b {}
逻辑与
@if not $disabled {}
逻辑非
控制流
9@if $on { display: block; }
条件块
@else if $alt { display: flex; }
附加条件
@else { display: none; }
回退分支
@each $c in red, green, blue {}
遍历列表
@each $name, $val in $map {}
遍历映射的键和值
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
从映射生成规则
@for $i from 1 through 3 {}
循环（包含结束值）
@for $i from 0 to 3 {}
循环（不含结束值）
@while $i > 0 { $i: $i - 1; }
条件成立时循环
内置模块
14@use 'sass:math'; math.floor(4.7)
向下取整到最近整数
math.ceil(4.1)
向上取整到最近整数
math.round(4.5)
四舍五入到最近整数
math.percentage(math.div(1, 4))
将无单位比率转换为百分比
@use 'sass:string'; string.to-upper-case('hi')
将字符串转为大写
string.quote(hello)
为值加上引号
@use 'sass:color'; color.adjust($c, $lightness: 10%)
按数量调整颜色通道
color.scale($c, $lightness: 20%)
按比例平滑缩放颜色通道
color.mix($a, $b, 50%)
混合两种颜色
@use 'sass:list'; list.length($l)
列表中的项数
list.nth($l, 1)
获取第 n 项（从 1 起）
@use 'sass:map'; map.get($m, 'gap')
按键从映射读取值
map.merge($a, $b)
合并两个映射
map.keys($m)
获取映射键的列表
占位符与继承
9%card { border: 1px solid; }
占位符选择器（不单独输出）
.box { @extend %card; }
继承占位符的样式
.alert { color: red; }
可继承的普通选择器
.error { @extend .alert; }
继承一个真实选择器
.note { @extend .alert !optional; }
!optional：目标缺失时不报错
%btn-base { padding: 8px; }
在多个按钮间共享基类
.btn-primary { @extend %btn-base; }
多个选择器通过 @extend 共享一条规则
.btn-ghost { @extend %btn-base; }
每个继承在输出中分组
@include card;
参数化复用时优先用混入而非 @extend
插值与杂项
12.icon-#{$name} { content: ''; }
将变量插值到选择器中
width: calc(100% - #{$gap});
在 calc() 内插值 Sass 值
content: '#{$count} items';
在字符串内插值
--bs-#{$key}: #{$val};
动态构建 CSS 自定义属性
$map: ('sm': 576px, 'md': 768px);
定义键/值对的映射
map.get($map, 'md')
读取映射值（通过 sass:map）
@debug $value;
编译时将值打印到控制台
@warn 'deprecated';
发出编译时警告
@error 'invalid input';
以错误中止编译
// inline comment
静默注释（从输出中剥除）
/* block comment */
CSS 注释（若为 /*! 则保留在压缩输出中）
@import 'base';
旧式 import —— 已弃用，优先用 @use / @forward
没有条目匹配“:q”。
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。