说实话写了这么多年CSS我一直有个观点SCSS不是CSS的替代品而是CSS的“预处理器思维”。第一篇文章我们聊了变量、嵌套、选择器这些基础掌握了那些日常写样式已经比纯CSS舒服很多。但真正让SCSS从“好写的CSS”变成“能设计的CSS”靠的是进阶语法——混合宏、继承、运算、流程控制、模块化。这一篇我打算把第二阶段的语法一次讲透。它解决的问题是当项目里有大量重复却有细微差异的样式时怎么用一套代码生成无数种组合而不是CtrlC、CtrlV到怀疑人生。适合已经接触过SCSS基础、想写出更优雅更可维护样式风格的开发者阅读也适合准备用SCSS做组件库、主题系统的同学参考。1. SCSS进阶语法从“写样式”到“设计样式”1.1 基础语法解决的痛点和进阶语法的定位先梳理一下基础语法解决的是什么问题。变量解决的是“多处引用同一个值”的同步问题嵌套解决的是“层级选择器书写冗余”的问题父选择器解决的是“伪类、伪元素、状态选择器”的归属问题。这些都属于“让CSS更好写”的层面本质上还是每一条规则都得你亲手声明。进阶语法解决的是另一类问题“同一套样式逻辑怎么喂给不同的参数生成不同的结果”。举个例子。一个品红色的主按钮桌面端宽度是160px移动端是100%一个绿色的成功提示按钮宽度逻辑完全一样只是颜色变了。你用基础语法只能把宽度逻辑复制两遍。用混合宏抽成一个模板哪个按钮需要就include进去不同的地方用参数控制。这才是进阶语法真正的价值它把CSS从“描述语言”变成了一门“可编程语言”。我见过的很多前端项目SCSS用了两三个月变量和嵌套用得挺熟练但遇到多状态组件就开始复制粘贴了。问题不在这人不会写CSS而是没意识到SCSS的可编程能力可以塞进样式业务里。这一篇就是把这块补上。1.2 可维护样式的核心参数化思维进阶语法带来的不只是语法糖它强迫你思考一个问题一个组件有哪些维度是会变的哪些是不变的。拿按钮来说变的是颜色、尺寸、圆角、字号不变的是display布局、过渡动画、边框处理逻辑。有了这个拆解你自然会把按钮抽象成一个参数化模板颜色和尺寸作为参数布局和状态逻辑作为骨架。这个过程我称之为“样式设计”跟写组件逻辑时思考“哪些是props、哪些是内部状态”是同一个思路。学进阶语法最忌讳的是炫技。SCSS里能用的语法很多但不代表每个地方都适合用。后面我会专门讲到mixin、extend、placeholder的区别和选型原则这里先记住一个总纲进阶语法的目标是减少重复不是增加魔法。如果一段SCSS代码比它生成的CSS还难读那这个抽象就是失败的。2. SCSS核心语法逐项拆解2.1 混合宏mixin 与 include 的完整用法混合宏是SCSS里复用样式的核心机制。你把它理解成一个“样式函数”定义的时候写逻辑调用的时候传参数。基础语法我们只简单提了定义和调用这里把完整语法展开。定义和基本调用mixin flex-center { display: flex; align-items: center; justify-content: center; } .modal { include flex-center; }编译结果.modal { display: flex; align-items: center; justify-content: center; }这是最简单的用法适合“完全一样的样式片段”。但实际情况里纯粹的完全一致很少更多是“大体一致个别属性不同”。这就得靠参数。参数默认值、关键字参数、可变参数mixin button-variant($bg: #1890ff, $color: #fff, $border-radius: 4px) { background-color: $bg; color: $color; border-radius: $border-radius; border: 1px solid darken($bg, 10%); } .btn-primary { include button-variant; // 全部用默认值 } .btn-success { include button-variant(#52c41a, #fff, 2px); // 位置传参 } .btn-warning { include button-variant($bg: #faad14, $border-radius: 20px); // 关键字传参跳过中间参数 }注意两件事。第一位置传参必须按定义顺序传递一旦参数多了很容易传错。所以当参数超过两三个时我强烈建议用关键字传参。像上面的btn-warning只改背景和圆角颜色用默认值关键字传参可以直接跳过$color可读性也强得多。第二默认值不只是“给个兜底”它还承担了文档职责。你定义$bg: #1890ff调用的同事一看就知道这个参数默认是主色不需要翻来翻去。可变参数几个参数不确定时用mixin box-shadow($shadows...) { box-shadow: $shadows; } .card { include box-shadow(0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06)); }...表示把传进来的所有值打包成一个list适合box-shadow这种支持多组值的属性。这个特性在传多个transition、多个背景图时也很好用。content 内容块注入还有一个经常被忽略但实战中特别好用的能力content。它允许你在mixin的内部嵌入一段调用者传入的样式内容。mixin hover-lift($lift: 2px) { transition: transform 0.2s ease, box-shadow 0.2s ease; :hover { transform: translateY(-$lift); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); content; } } .card { include hover-lift { border-color: #1890ff; } }编译结果.card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-color: #1890ff; }这个语法最典型的使用场景是媒体查询。你可以定义一个响应式mixin把断点内的特殊样式通过content从外部传进去mixin respond-to($breakpoint) { if $breakpoint small { media (max-width: 767px) { content; } } else if $breakpoint medium { media (min-width: 768px) and (max-width: 1023px) { content; } } else if $breakpoint large { media (min-width: 1024px) { content; } } }这样业务代码里只需要.card { display: flex; flex-direction: column; include respond-to(large) { flex-direction: row; } }媒体查询的位置贴合元素本身不用单独跑到文件末尾写一堆media块维护的时候找上下文就方便多了。2.2 继承extend 与占位符选择器extend和mixin解决的是同一个问题——复用样式但底层机制完全不同。mixin是复制每次include都把代码复制一份到调用处。extend是合并把选择器合并到被继承的规则后面。.base-btn { display: inline-block; padding: 8px 16px; font-size: 14px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; } .btn-primary { extend .base-btn; background-color: #1890ff; color: #fff; }编译结果.base-btn, .btn-primary { display: inline-block; padding: 8px 16px; font-size: 14px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; } .btn-primary { background-color: #1890ff; color: #fff; }看到没有extend不会把基础样式复制到.btn-primary里而是把.btn-primary并进.base-btn的选择器列表。最终生成的CSS体积更小这是extend最大的优势。但这里有个坑如果你把.base-btn这种基础类直接用在HTML里那么所有extend了它的选择器在HTML中也会被.base-btn的规则命中。很多时候这不是你想要的结果——你只想让.btn-primary拥有.base-btn的样式并不希望HTML里出现一个无用的类名。解决方式是占位符选择器。占位符选择器 %%base-btn { display: inline-block; padding: 8px 16px; font-size: 14px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; } .btn-primary { extend %base-btn; background-color: #1890ff; color: #fff; } .btn-danger { extend %base-btn; background-color: #ff4d4f; color: #fff; }编译结果.btn-primary, .btn-danger { display: inline-block; padding: 8px 16px; font-size: 14px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; } .btn-primary { background-color: #1890ff; color: #fff; } .btn-danger { background-color: #ff4d4f; color: #fff; }占位符选择器以%开头只存在于SCSS源码中不会被编译输出。除非有选择器extend了它否则它在CSS里完全不存在。这就避免了对HTML结构的侵入。extend还有一个特性需要注意它支持继承链。.btn-primaryextend了%base-btn而.btn-primary-large又 extend 了.btn-primary最终三个都会合并进同一组基础规则。这在构建组件变体的时候非常有用但链太长也会让选择器列表变得难读建议控制在两层以内。2.3 运算与函数让数值和颜色“活”起来SCSS的运算能力经常被低估。变量运算可以让你定义一套设计令牌design token然后所有尺寸、间距、颜色都由这套令牌计算而来改一处全局生效。数值运算$base-unit: 8px; .card { padding: $base-unit * 2; // 16px margin: $base-unit * 1.5; // 12px width: (100% / 3) - $base-unit; // 百分比和像素混算 }SCSS支持的运算符包括、-、*、/、%。注意两点第一除法。在SCSS中/早年只是普通字符为了兼容CSS的font简写如font: 16px/1.5虽然新版SCSS已经支持math.div()函数但为了可读性和兼容性我建议除法显式用math.div()或者直接给表达式加括号。use sass:math; .col-4 { width: math.div(100%, 3); // 推荐 }第二单位必须兼容。8px 2px没问题8px 2em直接报错。遇到这种需求先用strip-unit之类的函数把单位处理掉再参与运算。颜色函数SCSS内置了大量的颜色函数最常用的三个是darken()、lighten()、mix()。$primary: #1890ff; .btn { background-color: $primary; :hover { background-color: darken($primary, 10%); } :active { background-color: darken($primary, 15%); } .btn-outline { background-color: transparent; border-color: $primary; color: $primary; :hover { background-color: mix($primary, #fff, 10%); border-color: lighten($primary, 5%); } } }darken($color, $amount)和lighten($color, $amount)以百分比调整颜色的亮度适合生成hover/active状态。mix($color1, $color2, $weight)混入两个颜色能生成更自然的中间色。这些函数让“一套主色生成整组状态色”变成现实做主题系统的时候几乎是标配。列表函数和map操作SCSS里list和map是两种数据结构。list就是逗号或空格分隔的值序列map是键值对集合语法类似JSON$spacing-sizes: 4px, 8px, 12px, 16px, 20px; // list $theme-colors: ( primary: #1890ff, success: #52c41a, warning: #faad14, danger: #ff4d4f, ); // map想读map里某个键的值用map.get()use sass:map; .btn-success { background-color: map.get($theme-colors, success); }map配合循环是后面要说的大杀器先记住取值语法。2.4 流程控制if、each、for、while这是SCSS里最有“编程感”的一部分也是区分“会用SCSS”和“会设计SCSS”的分水岭。if / else if / elsemixin text-color($type) { if $type primary { color: #1890ff; } else if $type success { color: #52c41a; } else if $type warning { color: #faad14; } else { color: #666; } }注意事项SCSS里没有“真值”概念判断条件必须是boolean值。常见错误是拿字符串直接判断比如if $type这在SCSS里并不像JS那样会做隐式转换编译会报错。一定要写完整的比较表达式。if还有一种用法是和mixin配合做“按住build开关才输出某些样式”。比如调试用的outline$debug-mode: false; mixin debug-outline { if $debug-mode { outline: 1px solid red; } }each 遍历list和mapeach是最常用的循环用于批量生成相似的规则$spacing-sizes: 4px, 8px, 12px, 16px, 20px; each $size in $spacing-sizes { .m-#{$size} { margin: $size; } .p-#{$size} { padding: $size; } }这里的#{$size}是插值语法把变量值插入到选择器名称里。编译后你会得到一套完整的间距工具类。注意选择器不能直接用变量必须用插值#{}包一层。遍历map的写法$theme-colors: ( primary: #1890ff, success: #52c41a, warning: #faad14, danger: #ff4d4f, ); each $name, $color in $theme-colors { .btn-#{$name} { background-color: $color; } }第一个变量拿key第二个变量拿value直接批量生成一组按钮主题色。我在项目中经常用这个方式维护各种“按名称取色”的工具类后续加新色值只需要往map里加一行不用复制一大段样式。for 带计数器的循环for适合需要数字递增递减的场景。语法上through包含结束值to不包含结束值for $i from 1 through 5 { .col-#{$i} { width: percentage($i / 12); } }这个实现的就是一个简化版的栅格系统。1/12到5/12的列宽批量生成。注意percentage()是SCSS内置函数把小数转成百分比。while 用得少但偶尔救命$i: 12; while $i 0 { .col-#{$i} { width: percentage($i / 12); } $i: $i - 1; }while需要你自己处理循环变量的变化写起来容易出错绝大多数场景都能用for替代。我到现在只在写“根据容器宽度递归计算”这类复杂逻辑时用过两三次。初学阶段掌握if和each基本够了。3. 实战用SCSS抽象一个按钮组件3.1 场景设定与设计稿拆解理论知识讲了一堆现在拿一个真实场景串起来。假设我在开发一个组件库里的按钮组件需求有支持4种主题色主色、成功、警告、危险支持2种尺寸medium和large支持3种状态默认、hover、disabled支持2种形态实心、描边outline如果把所有组合拍平我需要写4 × 2 × 2 16个按钮类每个类还要写hover和disabled状态。用纯CSS写少说得靠几百行复制粘贴。用SCSS进阶语法核心定义加上循环不超过40行。3.2 从零搭建SCSS结构先定义设计变量把颜色、尺寸、圆角集中起来$btn-colors: ( primary: #1890ff, success: #52c41a, warning: #faad14, danger: #ff4d4f, ); $btn-sizes: ( medium: ( height: 32px, padding: 0 16px, font-size: 14px, ), large: ( height: 40px, padding: 0 24px, font-size: 16px, ), );这里用到了二维的map结构外层是尺寸名内层是具体参数。这在SCSS里完全合法。接着定义基础按钮的公共样式用占位符选择器因为它不会产生实际的CSS%btn-base { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; :disabled { cursor: not-allowed; opacity: 0.5; } }然后是主题色和尺寸的循环。关键点是循环里嵌套循环外层遍历尺寸内层遍历颜色同时生成实心和描边两种形态each $size-name, $size-values in $btn-sizes { each $color-name, $color-value in $btn-colors { .btn-#{$size-name}-#{$color-name} { extend %btn-base; height: map.get($size-values, height); padding: map.get($size-values, padding); font-size: map.get($size-values, font-size); background-color: $color-value; border-color: $color-value; color: #fff; :hover:not(:disabled) { background-color: darken($color-value, 8%); border-color: darken($color-value, 8%); } :active:not(:disabled) { background-color: darken($color-value, 12%); border-color: darken($color-value, 12%); } } .btn-#{$size-name}-#{$color-name}-outline { extend %btn-base; height: map.get($size-values, height); padding: map.get($size-values, padding); font-size: map.get($size-values, font-size); background-color: transparent; border-color: $color-value; color: $color-value; :hover:not(:disabled) { background-color: mix($color-value, #fff, 12%); } :active:not(:disabled) { background-color: mix($color-value, #fff, 25%); } } } }注意我用了map.get()来读取二维map里的具体值。这段代码编译后会生成两个尺寸×四种颜色×两种形态的全部按钮样式一共16个规则每个规则还带了hover、active、disabled。如果以后想加一个浅蓝主题色只需要在$btn-colors里加一行整个按钮系统自动多出4个新按钮类这就是map循环的威力。3.3 编译结果与性能复盘最终SCSS编译出的CSS基础公共样式%btn-base被extend的那部分只会出现一次被所有选择器共享。这比我用mixin复制16份的体积要小得多。实测下来同一套按钮系统mixin方案生成的CSS体积大概是extend方案的1.6倍左右。有人可能会问既然mixin复制会增大体积那是不是应该全面弃用mixin并不是。体积和可维护性之间要取舍。mixin的参数化能力和content注入是extend做不到的extend只能在纯继承场景发力。实际情况是高频复用的骨架部分用extend/占位符需要定制差异的部分用mixin两者配合使用。这个案例也揭示了进阶语法的核心工作方式先定义可变维度的map再设计固定骨架的占位符最后用循环把可变维度“缝”到固定骨架上。这套方法适用于绝大多数多态组件——tag标签、alert提示框、badge徽标都能这样搞。4. 实操中踩过的坑与排查技巧4.1 mixin、extend、占位符到底怎么选这是SCSS初学者问得最多的一个问题我把三类方案的核心差异整理成一张表直接用这张表做决策依据维度mixinextend普通类extend占位符 %复用机制复制代码到调用处合并选择器合并选择器生成CSS体积偏大较小较小是否污染HTML否可能基础类必须存在否支持参数支持不支持不支持支持content支持不支持不支持适用场景参数化、动态样式不想用占位符时的纯继承纯静态样式继承我的选择经验是需要传参、有动态逻辑的直接用mixin不要纠结体积。只是想把公共样式“分一份”出去没有任何参数需求用占位符extend。普通类extend慎用因为基础类会留在CSS里HTML不使用时它没有任何意义纯占体积。4.2 报错定位与排查SCSS编译报错的信息通常很明确但新手容易被几个高频报错卡住这里列一下“Undefined variable”变量没定义或者作用域不对。SCSS里嵌套块内声明的变量外部无法访问而且同一份文件里变量必须“先声明后使用”。我排查这个报错的经验是先从报错行往上找$变量名最近的一次定义看看是否在同一个作用域块里如果变量定义在each循环体内外层肯定用不了。“Mixin [...] not found”include了一个不存在的mixin或mixin在当前文件可见性范围内找不到。最常见的原因是忘了use引入对应的模块文件。用了模块化之后每个文件都要显式引入SCSS不会在项目里全局搜索mixin。“Function [xxx] not found”同理内置函数拼写错了或者版本语法变了。比如早期SCSS直接写除法/新版推荐math.div()。遇到函数报错先看看是不是Sass版本更新导致的语法变化。“Expected expression”通常是少了一个括号、逗号或分号属于语法拼写问题。定位时看一下报错信息里给出的行号和附近代码尤其是each和if这种多行表达式非常容易漏写结尾括号。4.3 构建产物体积控制SCSS写得不注意编译产物很容易膨胀。除了extend场景尽量少用复制型的mixin外还有几个控制体积的实际经验第一循环生成工具类要有克制。each $i from 1 through 100生成100个margin工具类一来编译慢二来CSS体积爆炸。只生成你实际会用的区间。我一般用12或16作为上限123种间距没人全用得完。第二占位符没有被任何选择器extend时它不会输出任何内容。但如果你把它写在某个use文件里那个文件又没其他地方引用这段SCSS就会白白编译。建议占位符和公共变量文件统一管理未使用的占位符及时移除。第三避免把mixin当作CSS变量用。我见过有人把一段只有三行属性的样式抽成mixin然后到处include导致CSS体积暴增。三行以内的样式复用直接提炼成变量或者占位符就够了不需要mixin出场。4.4 模块化从import到use/forward最后必须提一下模块化因为进阶语法搭配文件拆分才最有威力。早年的import在SCSS新规范里已经逐步废弃新项目建议直接用use和forward。use的特点是每个文件加载一次而且是命名空间制的use sass:map; use sass:math; use ./variables as v; .btn { background-color: v.$primary; }引入同目录的_variables.scss模块时用as v给它起个别名然后用v.$primary访问变量避免全局变量污染。use装进来的成员只在本文件可见不会像老import那样把变量泄到全局。forward则是“转手导出”适合做一个模块的聚合出口// _index.scss forward variables; forward mixins; forward functions;其他文件只要use ./index就能拿到所有导出的成员。这个模式非常适合做设计系统、主题包的统一入口。老项目如果还在用import建议迁移到use但迁的时候注意两点一是use必须在文件顶部不能嵌套在if或媒体查询里二是use引入的文件作用域是独立的不能像原来那样隐式共享变量所有依赖都要显式引入。这第一眼会觉得麻烦但长期来看显式依赖让编译更快、报错更清晰非常值得。我个人在项目里实际用过一段时间import之后切到use最大的感受是“变量来源从一开始就能查清楚”。以前找变量定义得满项目搜现在每个文件顶部的use就像一张地图哪些变量、哪些mixin可用一目了然。这套组合拳打下来SCSS才能真正成为团队协作里样式代码的可依赖基础。等你习惯了这种既有参数化能力、又有模块边界的写法效率再回头看以前“所有样式写在一个文件里互相引用变量”的阶段一定会觉得当时是在用裸奔的方式写样式。