企业官网建设流程全解析

说实话，写了这么多年CSS，我一直有个观点：SCSS不是CSS的替代品，而是CSS的“预处理器思维”。第一篇文章我们聊了变量、嵌套、选择器这些基础，掌握了那些，日常写样式已经比纯CSS舒服很多。但真正让SCSS从“好写的CSS”变成“能设计的CSS”，靠的是进阶语法——混合宏、继承、运算、流程控制、模块化。这一篇我打算把第二阶段的语法一次讲透。它解决的问题是：当项目里有大量重复却有细微差异的样式时，怎么用一套代码生成无数种组合，而不是Ctrl+C、Ctrl+V到怀疑人生。适合已经接触过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 / @else

@mixin 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和map

@each是最常用的循环，用于批量生成相似的规则：

$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初学者问得最多的一个问题，我把三类方案的核心差异整理成一张表，直接用这张表做决策依据：

我的选择经验是：

• 需要传参、有动态逻辑的，直接用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才能真正成为团队协作里样式代码的可依赖基础。等你习惯了这种既有参数化能力、又有模块边界的写法效率，再回头看以前“所有样式写在一个文件里互相引用变量”的阶段，一定会觉得当时是在用裸奔的方式写样式。