登录
Sass 进阶：当 CSS 学会了编程，变量函数循环全都安排上
昨天我们用Sass告别了手工作坊，学会了变量和嵌套。今天咱们继续深入，看看Sass还有哪些骚操作——模块化、内置函数、条件循环，让你的CSS代码像程序一样聪明。准备好，我们要从“会用”进化到“玩出花”了。
前言
还记得你第一次写CSS时的样子吗？一个属性一个属性地敲，一个颜色一个颜色地复制，改个主题色就像在玩“大家来找茬”。昨天学了Sass基础，你已经能像模像样地用变量和嵌套了，感觉自己有点东西了是吧？
但Sass的真正威力远不止于此。今天我们要学的这些东西，会让你忍不住喊出：“卧槽，CSS还能这样写？”——模块化让你的代码像乐高一样拼装，内置函数让颜色和数字自动计算，循环让你批量生成样式就像打印传单。准备好了吗？上车！
一、模块化：别再写一个几千行的巨型文件了
你有没有见过那种一个文件几千行的CSS？看到就想吐对吧？维护起来更是噩梦。Sass的模块化功能就是来拯救你的。
1. @use：新一代的模块引入
以前Sass用@import，但@import有个问题：它会把你引入的所有东西都混到一个全局作用域里，变量重名就覆盖，混乱不堪。现在推荐用@use，它创建了命名空间，隔离了变量。
// _variables.scss
$primary-color: #8A2BE2;
$font-stack: 'Helvetica', sans-serif;
// _buttons.scss
@use 'variables';
.button {
background: variables.$primary-color; // 通过命名空间访问
font-family: variables.$font-stack;
}
看到没，通过variables.前缀访问，清清楚楚，妈妈再也不用担心我变量重名了。
2. 下划线开头的“部分文件”
你发现上面文件名是_variables.scss，有个下划线。这是Sass的约定：下划线开头的文件是“部分文件”，不会被单独编译成CSS，只用来被别的文件引入。就像厨房里的半成品食材，不直接上桌，但做菜要用。
3. @forward：合并转发
如果你有一堆工具函数，想打包成一个入口文件让别人用，就用@forward。
// _mixins.scss
@mixin flex-center { ... }
// _variables.scss
$primary: #8A2BE2;
// _index.scss
@forward 'variables';
@forward 'mixins';
// main.scss
@use 'index' as *; // 直接使用所有转发的成员，无需命名空间
这样别人只要引入index，就能用你所有的变量和混入，方便又优雅。
二、内置函数：Sass自带的神兵利器
Sass内置了很多函数，让你能操作颜色、数字、字符串，就像JavaScript一样。这些函数能帮你省掉无数计算和手工调整。
1. 颜色函数：调色盘在手
颜色是CSS里最烦人的东西之一。你要一个颜色变暗10%？用darken()。变亮？用lighten()。混合两个颜色？用mix()。
$primary: #8A2BE2;
.btn {
background: $primary;
&:hover {
background: darken($primary, 10%); // 变暗10%
}
&.disabled {
background: lighten($primary, 20%); // 变亮20%
}
}
.card {
border: 1px solid rgba($primary, 0.3); // 转成半透明
}
还有adjust-hue()调整色相，saturate()增加饱和度，desaturate()降低饱和度……总之，调色不再靠肉眼，全交给Sass计算。
2. 数字函数：算清楚
percentage(0.3) 转成30%，round(3.14) 取整，min(1, 2, 3) 取最小值，max()取最大值。这些函数在处理响应式尺寸时尤其好用。
$container-width: 1200px;
$gutter: 20px;
.item {
width: percentage(1/3); // 33.33333%
margin-right: $gutter;
&:nth-child(3n) {
margin-right: 0;
}
}
3. 字符串函数：玩文字
quote()加引号，unquote()去引号，str-index()查找位置，str-insert()插入。虽然不是天天用，但需要的时候真香。
4. 检查函数：知己知彼
type-of($var)返回变量类型，unit(10px)返回单位，unitless(10px)判断是否有单位。写mixin时常用到，比如：
@mixin size($value) {
@if unitless($value) {
// 如果没单位，默认px
width: #{$value}px;
} @else {
width: $value;
}
}
三、控制指令：让CSS长脑子
这才是Sass最像编程语言的地方——有了条件判断和循环，你就能批量生成样式，再也不用一个一个手写了。
1. @if：聪明的条件判断
根据不同的情况输出不同的样式。
@mixin theme($mode) {
@if $mode == 'light' {
background: white;
color: black;
} @else if $mode == 'dark' {
background: #333;
color: white;
} @else {
background: gray;
color: black;
}
}
.light-theme { @include theme(light); }
.dark-theme { @include theme(dark); }
这个例子在真实项目中很有用，比如根据主题切换颜色。
2. @for：循环造样式
你写过这样的代码吗？
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 12px; }
.m-4 { margin: 16px; }
.m-5 { margin: 20px; }
写了五行手就酸了。用@for：
@for $i from 1 through 5 {
.m-#{$i} {
margin: #{$i * 4}px;
}
}
一行代码生成了五个类，想生成到100也是分分钟的事。through包括结束值，to不包括。
3. @each：遍历列表
如果你要基于一个列表生成样式，比如不同颜色的按钮：
$colors: (primary: #8A2BE2, success: #28a745, danger: #dc3545);
@each $name, $color in $colors {
.btn-#{$name} {
background: $color;
color: white;
&:hover {
background: darken($color, 10%);
}
}
}
一键生成三个按钮样式，想加新的颜色？往列表里加一项就行。
4. @while：用条件控制循环
虽然不如for常用，但遇到动态条件时很有用。比如生成一个步长递增的系列：
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 2px * $i;
}
$i: $i - 2;
}
四、实战：用Sass生成一个完整的工具类库
我们来做点实在的。比如你要做一个工具类库，包含外边距、内边距、文字颜色、背景色，而且要有不同的尺寸和状态。手动写？那得写到明年。用Sass的循环和函数，分分钟搞定。
// 定义配置
$spacing-sizes: (0, 4, 8, 12, 16, 20, 24);
$colors: (
primary: #8A2BE2,
success: #28a745,
danger: #dc3545,
warning: #ffc107
);
// 生成外边距工具类
@each $size in $spacing-sizes {
.m-#{$size} {
margin: #{$size}px !important;
}
.mt-#{$size} {
margin-top: #{$size}px !important;
}
.mb-#{$size} {
margin-bottom: #{$size}px !important;
}
.ml-#{$size} {
margin-left: #{$size}px !important;
}
.mr-#{$size} {
margin-right: #{$size}px !important;
}
.mx-#{$size} {
margin-left: #{$size}px !important;
margin-right: #{$size}px !important;
}
.my-#{$size} {
margin-top: #{$size}px !important;
margin-bottom: #{$size}px !important;
}
}
// 生成颜色工具类
@each $name, $color in $colors {
.text-#{$name} {
color: $color !important;
}
.bg-#{$name} {
background-color: $color !important;
}
.border-#{$name} {
border-color: $color !important;
}
}
这段代码编译后会生成上百个工具类，够你在项目里用一辈子。而且改一个配置，所有类自动更新，爽不爽？
五、进阶技巧：让Sass更上一层楼
1. 使用&选择器的高级玩法
&代表父选择器，除了用在伪类，还能用来生成BEM风格的类名。
.block {
background: #f5f5f5;
&__element {
padding: 10px;
}
&--modifier {
border: 1px solid red;
}
}
编译成：
.block { background: #f5f5f5; }
.block__element { padding: 10px; }
.block--modifier { border: 1px solid red; }
完美符合BEM命名规范，还不用手写冗长的类名。
2. 使用@error做校验
在mixin里加参数校验，提前报错，省得调试半天不知道错在哪。
@mixin size($width, $height: $width) {
@if unitless($width) or unitless($height) {
@error "width和height必须带单位！";
}
width: $width;
height: $height;
}
3. 使用@debug和@warn
调试时输出变量值，或者在即将弃用的样式上给警告。
@debug $primary-color; // 控制台输出变量值
@warn "这个mixin快过期了，别用了"; // 警告信息
六、总结
Sass真正强大之处，在于它把CSS从“描述语言”变成了“编程语言”。通过今天的内容，你学会了：
-
模块化：用
@use和@forward组织代码，告别混乱 - 内置函数：操作颜色、数字、字符串，让样式自动计算
-
控制指令：
@if判断，@for循环，@each遍历，批量生成样式 -
高级技巧：
&的妙用，参数校验，调试工具
掌握了这些，你写CSS的效率能提升好几倍。更重要的是，你的样式代码会变得像程序一样有逻辑、可维护。别人还在手动改颜色，你已经用循环生成了整个主题；别人还在复制粘贴，你已经用mixin封装了所有复用逻辑。
明天我们将进入JavaScript的世界，从基础开始重新认识这门“前端灵魂语言”。无论你是想巩固基础，还是查漏补缺，都值得期待。
如果你觉得今天的文章够骚够实用，点个赞让更多人看到。有问题评论区见，我们明天见！
