Sass / SCSS 速查
共 26 条 Sass / SCSS 常用语法，涵盖基础语法、复用、模块系统、函数与运算、编译与集成。 支持搜索与分类筛选，点击即可复制。
基础语法
SCSS 是 CSS 超集，兼容原有写法。
| 命令 | 说明 |
|---|---|
| 变量（以 $ 开头） | |
| 嵌套与 & 父选择器 | |
| BEM 场景的父引用 | |
| 导入（已被 @use 取代） | |
| 两种注释 |
复用
mixin 与 extend。
| 命令 | 说明 |
|---|---|
| 定义 mixin | |
| 引入 mixin | |
| 参数化 mixin | |
| 占位符与 @extend（合并选择器） | |
| 自定义函数 |
模块系统
@use / @forward 是新一代方案。
| 命令 | 说明 |
|---|---|
| 引入模块并起命名空间 | |
| 用命名空间访问变量 | |
| 取消命名空间（易冲突，慎用） | |
| 转发（做统一入口） | |
| 官方模块 |
函数与运算
颜色与数学。
| 命令 | 说明 |
|---|---|
| 除法须用 math.div（/ 已废弃） | |
| 调整颜色（新 API） | |
| 混色 | |
| 旧颜色函数（已不推荐） | |
| 读取 map（sass:map） | |
| 遍历生成类名 |
编译与集成
dart-sass 是当前实现。
| 命令 | 说明 |
|---|---|
| 编译单个文件 | |
| 监听目录并输出 | |
| 压缩输出 | |
| 构建工具集成 | |
| 解析第三方样式 |
使用说明
Sass / SCSS 语法速查：基础语法、复用、模块系统、函数与运算、编译与集成；支持搜索与分类筛选，点击即可复制。
- 按用途点分类：基础语法、复用、模块系统、函数与运算、编译与集成。
- 点「语法」列复制，替换变量名与选择器后使用。
- 新项目用 @use 替代 @import，避免全局污染与重复加载。
- 除法改用 math.div，颜色处理用 color.adjust 等新函数。
常见问题
- @import 和 @use 有什么区别？
- @import 全局共享、可重复执行；@use 加载一次并默认带命名空间，更安全。Sass 已不推荐 @import，新代码用 @use/@forward。
- 为什么 / 做除法不生效了？
- 新版 Sass 把 / 视为分隔符而非除法，需用 math.div(a, b) 明确表示除法。
- & 是什么意思？
- 父选择器引用，代表当前嵌套上下文的选择器。常用于 &.active 追加类、&:hover 伪类与 &__el 拼 BEM 类名。
延伸阅读
相关工具
TQ
TanStack Query 速查
useQuery / useMutation / 缓存 速查
RRT
React Router 速查
createBrowserRouter / useParams / loader 速查
I18N
i18next 速查
i18next.init / useTranslation / t() 速查
DAYJS
Day.js 速查
dayjs() / format / add / 插件 速查
AXIOS
Axios 速查
axios.get / 拦截器 / create / 取消 速查
SIO
Socket.IO 速查
new Server / emit / rooms / client 速查