Article

预处理插件 Sass

更新于：2026-07-08

第1章：Sass 简介与环境搭建

1.1 什么是 Sass

名称语法/说明用途代码示例注意事项
Sass 定义Sass 是 Syntactically Awesome Style Sheets 的缩写介绍 Sass 的全称与基本概念-属于描述性内容，无代码
预处理器一种扩展 CSS 的语言，需编译为标准 CSS解释 Sass 作为预处理器的角色-编译后才能在浏览器中运行
功能增强提供变量、嵌套、混合、函数等高级功能提升 CSS 的可维护性与开发效率-不是直接运行的 CSS
编译过程.scss 或 .sass 文件 → 编译 → .css 文件说明 Sass 的工作流程-开发时编辑 Sass，生产使用编译后 CSS
主要优势减少重复代码、结构清晰、支持逻辑控制理解为何使用 Sass 而非原生 CSS-初学者需适应编译流程

1.2 Sass 与 CSS 的关系

名称语法/说明用途代码示例注意事项
最终输出Sass 编译后生成标准 CSS理解两者输出一致性-浏览器只识别 CSS，不识别 Sass
语法兼容所有合法 CSS 代码都是合法 SCSS 代码可直接将 .css 改为 .scss 开始使用-降低迁移成本
增强而非替代Sass 是 CSS 的超集，扩展功能但不改变其本质明确 Sass 的定位-学好 CSS 是使用 Sass 的前提
开发与生产开发阶段写 Sass，生产环境使用编译后的 CSS区分开发流程与部署流程-确保编译步骤集成到构建流程中
调试映射通过 Source Map 可将 CSS 错误定位回原始 Sass 文件方便调试-需在编译时启用 Source Map 选项

1.3 Sass 与 SCSS 的区别

名称语法/说明用途代码示例注意事项
Sass 语法缩进式语法，无大括号和分号，如: .class\n color: red介绍旧版缩进语法-已较少使用，多见于早期项目
SCSS 语法使用大括号和分号，类似 CSS，如: .class { color: red; }当前主流语法-推荐新项目使用 SCSS
文件扩展名.sass（缩进语法），.scss（CSS 扩展语法）区分文件类型-不可混用
兼容性SCSS 完全兼容 CSS；Sass 不兼容选择语法时的考量-SCSS 更易上手
转换工具Sass 提供 sass-convert 工具可相互转换在需要时迁移代码-转换可能需手动调整格式

1.4 安装 Sass 编译器（Dart Sass）

名称语法/说明用途代码示例注意事项
Dart Sass官方推荐的 Sass 实现，用 Dart 编写选择正确的编译器-优先使用，功能最全
安装 Node.js从官网下载并安装 Node.js提供 npm 包管理器-Dart Sass 依赖 Node.js 环境
全局安装 Sassnpm install -g sass安装命令行工具npm install -g sass需管理员权限，安装一次即可
检查版本sass --version验证安装是否成功sass --version应输出版本号，如 1.77.8
局部安装（推荐）npm install sass项目内安装，避免全局依赖npm install sass结合 package.json 更利于团队协作

1.5 编译 Sass 文件（命令行与工具）

名称语法/说明用途代码示例注意事项
单文件编译sass input.scss output.css将一个 Sass 文件编译为 CSSsass style.scss style.css基础用法，适合简单项目
监听文件sass --watch input.scss output.css实时编译，文件保存时自动更新sass --watch style.scss style.css开发阶段提高效率
监视整个目录sass --watch src/scss:dist/css编译整个目录sass --watch scss:css推荐用于项目开发
生成 Source Mapsass --source-map input.scss output.css生成映射文件用于调试sass --source-map style.scss style.css默认开启，便于浏览器调试
压缩输出sass --style=compressed input.scss output.css生成压缩版 CSS 用于生产环境sass --style=compressed style.scss style.min.css减小文件体积，提升加载速度
使用配置文件在 package.json 或 scripts 中定义编译命令自动化构建流程"scripts": { "build": "sass scss:css --style=compressed" }可结合 npm run build 使用

第2章：基础语法与变量

2.1 SCSS 语法基础

名称语法/说明用途代码示例注意事项
文件扩展使用 .scss 作为文件后缀标识 SCSS 文件style.scss不可使用 .css 编写 SCSS 语法
语法规则类似 CSS，使用大括号 {} 和分号 ;保证语法正确性.box { color: red; }所有 CSS 合法语句均可直接使用
注释//（单行，编译后不保留）和 /* */（多行，编译后保留）添加代码说明// 变量定义
$color: red;
/* 主题色 */		推荐使用 // 避免输出冗余注释
嵌套结构在选择器内嵌套子选择器简化层级书写.nav { a { color: blue; } }避免过度嵌套（建议不超过 4 层）
与 CSS 兼容所有 CSS 代码可直接写在 .scss 文件中平滑迁移现有项目@keyframes fadeIn { from { opacity: 0; } }无需修改即可复用 CSS 代码

2.2 变量定义与使用

名称语法/说明用途代码示例注意事项
变量声明$变量名: 值;定义可复用的数据$primary-color: #007bff;必须以 $ 开头
变量使用在任意支持该数据类型的 CSS 属性中使用 $变量名引用变量值color: $primary-color;编译后替换为实际值
数据类型支持支持颜色、数字、字符串、布尔、null、列表、map存储多种样式数据$font-stack: "Helvetica", "Arial", sans-serif;类型灵活，适合复杂配置
局部变量在规则块或混合中定义的变量限制变量作用范围a {
$hover-color: darken($color, 10%);
color: $hover-color;
}		外部无法访问
动态赋值变量可在不同作用域中被重新赋值实现主题切换等动态效果$theme-color: blue;
$theme-color: red;		后定义覆盖前定义（同作用域）

2.3 变量作用域

名称语法/说明用途代码示例注意事项
全局变量在根层级定义的变量跨模块共享配置$spacing: 1rem;
.btn { margin: $spacing; }		推荐用于设计系统常量
局部变量在选择器、混合或函数内部定义的变量封装内部逻辑.card {
$padding: 1.5rem;
padding: $padding;
}		外部不可访问
块级作用域在 @if、@for 等控制指令内定义的变量控制变量可见性@if $debug { $log: true; }仅在当前指令块内有效
变量遮蔽局部变量与全局变量同名时，局部变量优先临时覆盖全局值$color: red;
.box {
$color: blue;
color: $color;
}		编译后取局部值 blue
!global 标志使用 !global 显式声明全局变量跨作用域修改全局变量$var: default !global;慎用，避免污染全局命名空间

2.4 变量命名规范

名称语法/说明用途代码示例注意事项
小写字母与连字符推荐使用 kebab-case（短横线分隔）保持命名一致性$primary-color、$font-size-large避免使用驼峰或下划线（虽支持）
语义化命名名称应明确表达用途提高代码可读性$danger-color 而非 $red避免模糊命名如 $color1
前缀分类按类型添加前缀，如 $color-、$font-、$spacing-便于组织和查找$color-primary、$spacing-md适合大型项目
常量大写（可选）可使用 $CONSTANT_NAME 表示不变量标识设计系统常量$PRIMARY-COLOR: #007bff;非强制，团队可约定
避免缩写除通用缩写（如 btn、nav）外，尽量使用完整单词保证可维护性$border-radius-sm 而非 $br-sm新成员易理解

第3章：嵌套与作用域

3.1 选择器嵌套

名称语法/说明用途代码示例注意事项
基础选择器嵌套在父选择器内直接嵌套子选择器简化层级结构书写.header { .logo { width: 100px; } }编译后生成 .header .logo
多级嵌套支持多层嵌套，表达复杂 DOM 结构映射 HTML 层级关系.nav { ul { li { a { color: blue; } } } }避免超过 4 层，防止 CSS 过度具体
同层级并列使用 & 实现同级选择器组合生成复合选择器.btn { &.active { color: green; } }& 代表父选择器
伪类伪元素嵌套将 :hover、::before 等嵌套在主选择器内集中管理状态样式a { &:hover { color: red; } }提高可读性，避免分散
属性选择器嵌套在嵌套中使用 [attr] 选择器针对特定属性定义样式input { &[disabled] { opacity: 0.5; } }语法清晰，易于维护

3.2 属性嵌套

名称语法/说明用途代码示例注意事项
属性前缀嵌套将共享前缀的属性分组，如 font-、background-减少重复输入.text { font: { size: 16px; weight: bold; } }编译后展开为 font-size、font-weight
边框嵌套使用 border 作为根属性进行嵌套组织边框相关样式.box { border: { width: 1px; style: solid; color: #ccc; } }简化边框定义
内外边距嵌套支持 margin 和 padding 嵌套统一管理间距.section { margin: { top: 20px; bottom: 10px; } }提高代码组织性
背景嵌套background 下嵌套 color、image、size 等集中配置背景属性.hero { background: { color: #000; image: url(bg.jpg); } }编译后合并为 background 复合属性
动画嵌套animation 下嵌套 name、duration、timing-function 等简化动画定义.fade { animation: { name: fadeIn; duration: 1s; } }保持动画配置集中

3.3 父选择器 &

名称语法/说明用途代码示例注意事项
引用父选择器使用 & 代表当前父选择器生成复合或兄弟选择器.btn { &-primary { background: blue; } }编译为 .btn-primary（注意连字符）
状态伪类&:hover、&:focus 等简化状态定义快速添加交互样式.link { &:hover { text-decoration: underline; } }比手动写 .link:hover 更直观
相邻兄弟选择器使用 & + 选择紧跟其后的同级元素定义相邻元素样式.title { & + .content { margin-top: 10px; } }表达 DOM 顺序关系
子选择器& > 显式定义子元素关系精确控制层级.list { & > .item { margin: 5px; } }避免后代选择器的过度匹配
多重 & 使用在一个规则中多次使用 &构建复杂选择器逻辑.card { &.featured &-title { color: gold; } }注意生成的选择器顺序和结构

3.4 嵌套中的作用域与最佳实践

名称语法/说明用途代码示例注意事项
作用域继承嵌套内部可访问外部变量和混合复用配置和逻辑$color: red;
.box { .text { color: $color; } }		变量查找遵循词法作用域
避免过度嵌套嵌套层级建议不超过 3-4 层防止生成过于具体的选择器.header { nav { ul { li { a { ... } } } } }过深嵌套导致 CSS 难以覆盖
BEM 命名兼容使用 &__element、&--modifier 配合 BEM支持主流命名规范.btn { &__icon { margin-right: 5px; } }& 自动拼接块名
生成选择器长度嵌套越深，生成的 CSS 选择器越长影响性能和可维护性.layout-sidebar-content-title尽量扁平化结构
可维护性嵌套应反映 HTML 结构，避免为省代码而过度嵌套保证样式清晰易改-优先考虑可读性和维护成本

第4章：混合（Mixins）与参数

4.1 定义与调用 Mixin

名称语法/说明用途代码示例注意事项
定义 Mixin@mixin 名称 { ... }创建可复用的样式块@mixin clearfix { &::after { content: ""; display: block; clear: both; } }使用 @mixin 关键字声明
调用 Mixin@include 名称;在选择器中插入 Mixin 定义的样式.container { @include clearfix; }使用 @include 引入
无参数 MixinMixin 不接受任何输入参数封装固定样式模式@mixin center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }适合通用布局技巧
命名规范使用连字符命名，语义清晰提高可读性@mixin flex-center { ... }避免缩写，如 fx-ctr
编译输出Mixin 内容会被复制到调用位置生成实际 CSS-多次调用会生成重复 CSS（可用 @extend 优化）

4.2 带参数的 Mixin

名称语法/说明用途代码示例注意事项
定义带参 Mixin@mixin 名称($参数1, $参数2) { ... }创建可配置的样式模板@mixin size($w, $h) { width: $w; height: $h; }参数以 $ 开头
调用传参@include 名称(值1, 值2);传递具体值定制样式.box { @include size(100px, 100px); }按顺序传递参数
类型灵活参数可接收颜色、数字、字符串、列表等任意 Sass 数据类型提高复用性@mixin alert($bg, $color, $border) { background: $bg; color: $color; border: $border; }无需声明类型
表达式传参可传递变量或运算表达式动态生成样式.small { @include size($base-size * 0.8, $base-size * 0.8); }支持复杂计算
作用域隔离Mixin 内部参数为局部变量，不影响外部避免命名冲突-参数仅在 Mixin 内部有效

4.3 默认参数

名称语法/说明用途代码示例注意事项
设置默认值在参数后使用 : 默认值提供可选配置，简化调用@mixin padding($p: 1rem) { padding: $p; }默认参数应放在参数列表末尾
部分传参调用时只传递非默认参数快速使用常用配置.box { @include padding; }省略参数时自动使用默认
多参数默认多个参数均可设置默认值创建高度灵活的 Mixin@mixin btn($bg: blue, $color: white) {
background: $bg;
color: $color;
}		提高易用性
覆盖默认调用时传入新值覆盖默认定制特定实例.danger { @include btn(red); }传入值优先级高于默认
可选配置将不常用参数设为默认 null 或 false实现条件逻辑@mixin icon($url, $size: 1em, $block: false) { ... }结合 @if 实现分支

4.4 可变参数 @content

名称语法/说明用途代码示例注意事项
接收内容块在 Mixin 定义末尾使用 @content允许调用者插入自定义样式@mixin media($width) { @media (max-width: $width) { @content; } }@content 代表传入的代码块
调用传入样式使用 { ... } 在 @include 后定义内容块实现模板模式@include media(768px) { .nav { display: none; } }必须使用大括号包裹
响应式封装封装媒体查询，复用断点逻辑统一响应式策略同上避免重复书写 @media
多次使用在 Mixin 中可多次使用 @content实现复杂包装逻辑@mixin twice { @content; @content; }内容块会被重复插入
作用域@content 中可访问 Mixin 外部变量保持上下文连贯$color: red;
@include themed { color: $color; }		但不能访问 Mixin 参数（除非传递）

第5章：函数与运算

5.1 内置颜色函数（lighten, darken 等）

名称语法/说明用途代码示例注意事项
lighten()lighten($color, $amount) 将颜色变亮 $amount 百分比生成高亮色调$highlight: lighten($primary, 20%);$amount 为 0%~100% 的百分数
darken()darken($color, $amount) 将颜色变暗 $amount 百分比生成阴影或深色变体$shadow: darken($text, 30%);常用于 hover 状态
saturate()saturate($color, $amount) 增加颜色饱和度增强色彩鲜艳度$vibrant: saturate($muted, 50%);$amount 可超过 100%
desaturate()desaturate($color, $amount) 降低颜色饱和度生成柔和或灰阶色调$muted: desaturate($red, 40%);用于禁用状态
rgba()rgba($color, $alpha) 设置颜色透明度创建透明背景或边框$bg: rgba($black, 0.1);也可直接 $color: rgba($color, 0.5)

5.2 数值与单位运算

名称语法/说明用途代码示例注意事项
基本算术+、-、*、/ 支持数字运算动态计算尺寸、间距等$width: 100px / 2;乘除需加括号避免 CSS 原生 / 解析错误
单位兼容运算相同类型单位可运算（如 px + px、em * 2）组合或缩放尺寸$padding: 1rem + 0.5rem;不同单位（如 px 与 em）不可直接加减
混合单位运算Sass 自动转换兼容单位（如 cm 与 mm）简化物理尺寸计算$total: 1cm + 10mm;仅限可转换的度量单位
除法特殊规则使用 / 需被括号包围 (a / b) 或作为唯一值，否则视为 CSS 字符串避免解析歧义$ratio: (1 / 3);推荐始终用括号包裹除法表达式
运算与变量变量参与运算，支持复杂表达式动态生成响应式值$item-width: ($container - $gutter * 3) / 4;确保变量已定义

5.3 自定义函数 @function

名称语法/说明用途代码示例注意事项
定义函数@function 名称($参数) { @return 值; }创建可复用的计算逻辑@function px-to-rem($px, $base: 16px) {
@return $px / $base * 1rem;
}		必须包含 @return
函数调用在样式中像内置函数一样使用自定义函数应用业务逻辑font-size: px-to-rem(14px);返回值可为任意 Sass 数据类型
参数默认值支持为参数设置默认值提高函数灵活性同上 $base: 16px默认参数放参数列表末尾
条件逻辑在函数内使用 @if、@else 实现分支处理多种输入情况@function is-dark($color) { @return lightness($color) < 50%; }仅支持返回值，不能输出 CSS
类型判断结合 type-of() 等函数验证输入增强函数健壮性@if type-of($val) != number { @error "..." }可用于错误提示

5.4 返回值与类型检查

名称语法/说明用途代码示例注意事项
@return在 @function 中返回计算结果定义函数输出@return $result;每个函数必须且只能有一个返回值
type-of()type-of($value) 返回值的类型（number、color、string 等）检查变量或参数类型@if type-of($x) == number { ... }用于条件分支或验证
unit()unit($number) 返回数值的单位（如 "px"、"em"）动态判断单位类型@if unit($size) == "px" { ... }便于单位转换逻辑
unitless()unitless($number) 判断数值是否无单位区分有无单位的数字@if not unitless($val) { $val: $val / 1px; }常用于标准化输入
错误处理@error "消息" 在函数中抛出错误阻止无效调用@if $cols < 1 { @error "列数必须 ≥ 1"; }编译中断，提示开发者修正

第6章：控制指令

指令语法/说明用途代码示例注意事项
@if / @else@if 条件 { ... } @else if 条件 { ... } @else { ... }实现条件判断逻辑@if $type == "warning" { color: yellow; }
@else if $type == "error" { color: red; }
@else { color: green; }		支持多重 @else if，但仅首个匹配块会被编译
@for@for $var from 起始值 through 结束值 { ... } 或 to（不包含结束值）循环生成样式规则@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}		使用 through 包含结束值，to 不包含
@each@each $var in 列表或映射 { ... }遍历列表、映射等数据结构@each $color in blue, red, green {
.#{$color}-text { color: $color; }
}		对于映射，使用 ($key, $value) in $map 形式
@while@while 条件 { ... }根据动态条件循环执行$x: 1;
@while $x < 4 {
.item-#{$x} { width: 10px * $x; }
$x: $x + 1;
}		确保有退出条件以避免无限循环

第7章：模块化与导入

7.1 @use 与 @import 的区别

特性@use@import说明
引入方式推荐的新语法，Sass 官方推荐旧语法，已弃用（将在未来版本移除）建议新项目使用 @use
作用域模块内容默认私有，仅通过命名空间访问全局混合、变量、函数自动注入全局作用域@use 避免命名污染
加载行为每个文件在整个编译中仅加载一次每次 @import 都会重新加载并合并内容@use 更高效，避免重复
变量访问必须通过命名空间访问（如 color.$primary）所有变量、混合、函数自动可用@use 提升代码清晰度
兼容性Sass 1.23.0+ 支持所有 Sass 版本支持旧项目迁移需逐步替换

7.2 使用 @use 导入模块

名称语法/说明用途代码示例注意事项
基本导入@use "文件路径";加载 SCSS 模块@use "variables";文件路径可省略 .scss 扩展名
相对路径使用 ./ 或 ../ 指定相对路径引入本地模块@use "../themes/dark";推荐使用相对路径组织项目结构
绝对路径（包）引入已安装的 npm 包或配置路径使用第三方库@use "sass-utilities";需配置 includePaths 或使用 npm
自动查找支持 _partial.scss 命名约定，自动识别下划线前缀文件简化模块命名@use "mixins";推荐使用 _ 前缀表示模块文件
编译结果导入的变量、混合等需通过命名空间访问实现模块化封装.btn { color: variables.$primary-color; }不会污染全局命名空间

7.3 命名空间与 as

名称语法/说明用途代码示例注意事项
默认命名空间文件名作为默认命名空间访问模块内容@use "colors";
.text { color: colors.$red; }		命名空间由文件名（不含路径和扩展名）决定
自定义命名使用 as 别名 指定命名空间简化长名称或避免冲突@use "config/theme" as theme;提高可读性和易用性
匿名命名空间使用 as * 取消命名空间（直接暴露成员）直接使用模块内变量和混合@use "helpers" as *;
@include clear;		慎用，可能引起命名冲突
别名冲突处理多个模块使用相同别名会报错防止覆盖@use "colors" as c;
@use "config" as c; ❌		编译时报错，需使用不同别名
动态访问命名空间在编译时确定，不支持运行时动态拼接保证静态分析可行性-与 JavaScript 模块机制不同

7.4 @forward 转发模块

名称语法/说明用途代码示例注意事项
基本转发@forward "路径";将模块内容转发出当前文件@forward "buttons";其他文件导入本文件时可访问被转发内容
转发到主入口在 _index.scss 或主文件中使用 @forward 汇总模块创建统一导入入口@forward "forms";
@forward "layout";		便于组织大型项目结构
自定义前缀使用 as 前缀-* 为转发的成员添加统一前缀避免命名冲突或统一风格@forward "mixins" as utils-*;使用后调用为 utils-clearfix
成员筛选使用 show 或 hide 控制暴露的成员封装内部实现，仅暴露公共 API@forward "tools" hide debug, log;实现模块封装与信息隐藏
透传性转发不创建命名空间，使用者通过引入方访问构建模块化架构A @forward B，C @use A → 可访问 B 的内容类似 JavaScript 的 re-export

第8章：高级特性

8.1 占位符选择器 %

名称语法/说明用途代码示例注意事项
定义占位符%placeholder-name { ... }定义可被继承但不输出的选择器%clearfix { &::after { content: ""; display: block; clear: both; } }仅在被 @extend 时才会生成 CSS
避免冗余输出不会被编译为独立的 CSS 规则减少最终 CSS 文件体积编译后无 %clearfix 输出适合封装通用样式模式
继承使用通过 @extend %placeholder-name; 引用复用样式块.container { @extend %clearfix; }生成 .container::after { ... }
与 Mixin 对比占位符生成更简洁的选择器合并，Mixin 是内容复制选择更优的复用方式% 更适合纯样式继承，@mixin 更灵活% 不支持参数传递
命名规范使用语义化名称，通常以功能命名提高可读性%hidden、%centered、%button-reset避免与类名冲突

8.2 @extend 继承

名称语法/说明用途代码示例注意事项
基本继承.child { @extend .parent; }继承另一个选择器的所有样式.alert { @extend .message; }生成 .message, .alert { ... }
多重继承一个选择器可 @extend 多个其他选择器组合多种样式.btn-danger { @extend .btn, .danger; }所有被继承样式都会合并
占位符继承@extend %placeholder;复用未直接输出的样式块.section { @extend %clearfix; }推荐用于抽象样式模式
编译优化Sass 会合并共享样式，减少重复降低 CSS 体积多个 @extend .base → 合并为一组选择器比 @mixin 更节省字节
局限性不能跨文件继承（除非使用 @use + % 转发），且可能影响选择器权重注意维护性和性能继承 .nav li a 可能导致过长选择器权重增加可能难以覆盖

8.3 插值 #{} 使用

名称语法/说明用途代码示例注意事项
变量插值#{$variable} 将变量值插入选择器、属性或值中动态生成名称或值#{$class}-item { color: red; }在选择器和属性名中必须使用插值
选择器拼接结合字符串与变量生成类名构建 BEM 或命名空间.#{$block}__element { ... }常用于组件化开发
属性名动态化使用 #{$prop} 定义动态属性名创建通用样式模式#{$prop}: #{$value};需在 @each 或 @for 中使用
Map 键访问使用 #{} 访问 Map 中的动态键遍历映射生成样式@each $name in map-keys($themes) {
.theme-#{$name} {
color: map-get($themes, $name);
}
}		提升灵活性
运算与函数可在 #{} 中进行运算或调用函数动态计算结果width: #{percentage($current / $total)};注意返回类型是否符合 CSS 要求

8.4 CSS 自定义属性（变量）兼容

名称语法/说明用途代码示例注意事项
定义原生变量--variable-name: value;在 CSS 中定义可变属性:root { --primary-color: blue; }原生支持，可在 JS 中读写
Sass 变量赋值使用 Sass 变量设置 CSS 变量结合 Sass 逻辑生成动态变量--gap: #{$spacing-unit * 2};需使用 #{} 插值
作用域控制CSS 变量遵循 CSS 作用域规则（可被后代覆盖）实现主题切换或组件定制.theme-dark { --text-color: white; }比 Sass 变量更具运行时灵活性
回退值var(--name, fallback-value) 提供默认值兼容旧浏览器或未定义情况color: var(--text-color, #333);增强健壮性
与 Sass 变量对比Sass 变量编译时解析，CSS 变量运行时解析选择合适变量系统Sass 变量用于构建时逻辑，CSS 变量用于交互可结合使用，互不冲突

第9章：实战应用与项目结构

9.1 BEM 命名与 Sass 结合

名称语法/说明用途代码示例注意事项
BEM 结构Block（块）__Element（元素）--Modifier（修饰符）实现语义化、可维护的 CSS 命名规范.btn__icon--large避免深层嵌套，提升选择器可读性
Sass 嵌套实现使用嵌套结构对应 BEM 层级简化 BEM 书写.btn { &__icon { ... } &--large { ... } }编译后自动添加父选择器
变量结合用 Sass 变量定义 BEM 块的样式变量统一组件视觉风格$btn-bg: #007bff;
.btn { background: $btn-bg; }		提高可配置性
Mixin 封装封装 BEM 模板逻辑（如响应式修饰符）复用常见模式@mixin btn-size($padding) {
.btn--large { padding: $padding; }
}		减少重复代码
避免过度嵌套嵌套层级建议不超过 3 层防止 CSS 权重过高和性能问题不推荐：.btn__icon__arrow__inner保持结构扁平化

9.2 设计系统中的主题切换

名称语法/说明用途代码示例注意事项
主题变量组织使用 Map 存储不同主题的变量集集中管理主题配置$themes: (
light: (primary: #007bff, ...),
dark: (primary: #0d6efd, ...)
);		便于维护和扩展
动态变量注入结合 @each 和 --css-variables 生成主题类支持运行时主题切换@each $name, $map in $themes {
.theme-#{$name} {
@each $key, $val in $map { --#{$key}: #{$val}; }
}
}		输出为 CSS 自定义属性
Mixin 控制创建 theme() Mixin 应用主题样式在组件中应用主题@mixin theme($theme-map) {
color: map-get($theme-map, primary);
}		支持编译时主题生成
JavaScript 联动通过切换 class 或设置 :root 变量实现主题切换实现用户交互式换肤document.body.className = 'theme-dark';需配合 CSS 变量使用
默认主题回退设置默认主题类或 :root 变量确保无 JS 时仍可正常显示:root { --primary: #007bff; }提升可访问性和健壮性

9.3 响应式工具类生成

名称语法/说明用途代码示例注意事项
断点 Map 定义使用 Map 存储命名断点统一管理响应式阈值$breakpoints: ( sm: 576px, md: 768px, lg: 992px );提高可维护性
工具类生成结合 @each 和 @content 生成 d-none、m-4、p-2 等工具类快速布局和调试@each $bp, $val in $breakpoints {
@include media($val) {
.d-none-#{$bp} { display: none; }
}
}		类似 Bootstrap 工具类系统
间距系统基于 $spacing-scale 生成 m-0 到 m-5 等外边距类实现一致的间距设计@for $i from 0 through 5 {
.m-#{$i} { margin: $i * 0.25rem; }
}		推荐使用 4px 基准网格
可见性控制生成显示/隐藏工具类条件性展示元素.d-none、.d-block、.d-flex、.d-none-md结合 @extend %d-none 优化输出
性能考量按需生成，避免全量输出所有组合控制 CSS 文件体积使用配置开关控制生成范围大型项目建议按需引入

9.4 典型项目目录结构（7-1 结构）

目录说明典型内容示例文件用途
base/基础样式（重置、通用规则、基础组件）Normalize、Typography、Base Elements_reset.scss、_typography.scss、_base.scss项目基础视觉统一
components/可复用的 UI 组件（按钮、卡片、模态框等）独立功能模块_button.scss、_card.scss、_modal.scss构建页面的基本单元
layout/页面布局结构（头部、导航、页脚、网格系统）页面框架与结构_header.scss、_footer.scss、_grid.scss定义整体页面布局
pages/特定页面的样式（首页、用户中心等）页面专属样式_home.scss、_profile.scss覆盖或补充通用样式
themes/主题与皮肤相关样式不同视觉风格_light.scss、_dark.scss支持主题切换
utils/工具类与辅助函数（变量、函数、Mixin、占位符）可复用的逻辑与样式片段_variables.scss、_mixins.scss、_functions.scss提供开发支持
vendor/第三方库或框架的样式覆盖插件或 UI 框架样式_bootstrap-overrides.scss、_swiper.scss统一第三方样式风格
main.scss主入口文件，按顺序导入所有模块全局编译入口@use "utils/variables";
@use "base/reset";
...		控制编译顺序与依赖关系

说明：7-1 结构指 7 个功能目录 + 1 个主文件，是 Sass 社区广泛采用的模块化项目组织方式，有利于团队协作与长期维护。

第10章：性能优化与最佳实践

10.1 避免过度嵌套

名称说明优化前示例优化后示例注意事项
嵌套层级控制建议嵌套不超过 3 层，防止选择器过长和权重过高.nav { .item { a { &:hover { ... } } } }.nav { ... }
.nav-item { ... }
.nav-link:hover { ... }		过深嵌套影响可维护性和性能
使用 & 明确作用域正确使用 & 避免生成冗余选择器& &-child → .parent .parent-child&-child → .parent-child减少重复父类名
BEM 风格替代采用 BEM 等扁平化命名规范减少嵌套依赖深层嵌套实现组件结构使用 .block__element--modifier 类名提升样式的可预测性
媒体查询扁平化将媒体查询提升到顶层，避免在嵌套中重复在 .card { @media (...) { ... } }@media (...) { .card { ... } }减少重复断点代码
可读性优先过度嵌套降低代码可读性，增加维护成本多层缩进难以定位扁平结构更易扫描和调试团队协作时尤为重要

10.2 减少冗余 CSS 输出

名称说明优化方法代码示例注意事项
使用 %placeholder占位符选择器仅在被 @extend 时输出，避免未使用样式%clearfix { ... }.container { @extend %clearfix; }比 @mixin 更节省体积
合理使用 @extend合并共享样式，生成更紧凑的选择器列表.alert, .warning, .error { ... }@extend %base-message;避免继承复杂选择器导致权重问题
按需生成工具类控制响应式工具类、间距类等的生成范围，避免全量输出配置 $enable-spacing: true;@if $enable-flex { .d-flex { display: flex; } }大型项目建议模块化开关
删除未使用变量清理无引用的 Sass 变量、mixin 和函数移除未调用的 _unused.scss-定期代码审查或使用工具检测
输出格式选择生产环境使用 compressed 模式编译sass --style=compressed input.scss output.css-减小文件体积，提升加载速度

10.3 使用 @use 替代 @import

名称说明推荐做法代码示例注意事项
模块化加载@use 是现代 Sass 推荐的模块系统，取代已弃用的 @import全新项目统一使用 @use@use "variables";@import 将在将来版本移除
作用域隔离@use 导入的内容默认私有，需通过命名空间访问，避免全局污染使用 namespace.variable 访问colors.$primary提高代码清晰度和可维护性
防止重复加载@use 保证每个文件在整个编译中仅加载一次多个文件导入同一模块不会重复编译多次 @use "mixins";（同模块只加载一次）提升编译效率
命名空间管理支持 as 别名简化长路径或避免冲突@use "config/theme" as theme;@use "helpers" as *;（慎用）as * 可能引起命名冲突
平滑迁移旧项目可逐步替换 @import 为 @use，两者可共存先替换为 @use，再调整命名空间引用将 @import "vars"; → @use "vars" as vars;注意变量访问方式变化

10.4 编译配置与 Source Map

名称说明配置方式用途与优势注意事项
Source Map生成 .css.map 文件，将编译后 CSS 映射回原始 Sass 文件sass --source-map input.scss output.css 或 --no-source-map 关闭调试时定位样式来源，提升开发效率生产环境应关闭
输出样式 (--style)控制 CSS 输出格式：expanded、nested、compact、compressedsass --style=compressed src/main.scss dist/app.css开发用 expanded，生产用 compressedcompressed 去除空格注释，减小体积
监听模式 (--watch)自动监听文件变化并重新编译sass --watch src/scss:dist/css实时预览样式修改开发阶段必备
字符编码处理确保文件保存为 UTF-8，避免中文注释或字体名乱码编辑器设置 UTF-8 编码支持多语言内容特别注意字体文件路径
错误提示与日志编译失败时输出详细错误信息（文件、行号、原因）默认开启快速定位语法错误结合编辑器插件实现即时反馈

最佳实践总结

  • 开发阶段：启用 --watch 和 --source-map，使用 expanded 格式便于调试。
  • 生产构建：使用 --style=compressed，关闭 Source Map，清理未使用代码，确保最小化输出。
  • 团队协作：统一使用 @use，制定嵌套规范，采用 7-1 目录结构，提升项目可维护性。