🚀 CSS 预处理器革命
CSS 预处理器让 CSS 具备了编程语言特性（变量、函数、循环、模块化）。根据 State of CSS 2023 调查，78% 的开发者使用 Sass，32% 使用 Less。
78%
开发者使用 Sass
32%
开发者使用 Less
85%
满意度
3x
开发效率提升
预处理器核心价值
变量与常量
集中管理颜色、字体、间距等设计令牌
混合与复用
避免重复代码，提高可维护性
模块化
拆分样式文件，按需导入
逻辑控制
条件、循环、函数，让 CSS 更智能
💡 独特观点
CSS 预处理器的真正价值不是"写更少的代码"，而是建立设计系统。它让团队能够统一设计规范、快速迭代、减少错误。
⚖️ Sass vs Less 对比
选择合适的预处理器是项目成功的关键。两种工具各有优劣。
| 维度 | Sass（SCSS） | Less |
|---|---|---|
| 语法 | 类似 CSS，易学 | 类似 CSS，易学 |
| 功能丰富度 | ⭐⭐⭐⭐⭐（最强） | ⭐⭐⭐⭐（功能略少） |
| 社区生态 | 大（Ruby 起源，现 Dart） | 中（Bootstrap 采用） |
| 编译速度 | 中（Dart 版较快） | 快（JavaScript 编写） |
| 框架集成 | 广泛（Vue/React/Angular） | 较少 |
| 学习曲线 | 中（功能多） | 平缓（功能少） |
| 推荐场景 | 复杂项目、设计系统 | 简单项目、Bootstrap 定制 |
📝 语法对比示例
// ============================
// 1. 变量（Variables）
// ============================
// Sass（SCSS）
$primary-color: #1890ff;
$font-stack: 'Segoe UI', sans-serif;
$spacing-unit: 8px;
.primary-button {
background: $primary-color;
font-family: $font-stack;
padding: $spacing-unit * 2;
}
// Less
@primary-color: #1890ff;
@font-stack: 'Segoe UI', sans-serif;
@spacing-unit: 8px;
.primary-button {
background: @primary-color;
font-family: @font-stack;
padding: @spacing-unit * 2;
}
// ============================
// 2. 混合（Mixin）
// ============================
// Sass（SCSS）- 支持参数、默认值、可变参数
@mixin button($bg: $primary-color, $size: medium) {
background: $bg;
font-size: $size == large ? 18px : $size == small ? 12px : 14px;
border: none;
border-radius: 6px;
cursor: pointer;
@if $size == large {
padding: 12px 24px;
} @else if $size == small {
padding: 6px 12px;
} @else {
padding: 8px 16px;
}
}
.large-btn { @include button(#52c41a, large); }
.small-btn { @include button(#ff4d4f, small); }
// Less - 支持参数、默认值
.button(@bg: @primary-color, @size: 14px) {
background: @bg;
font-size: @size;
border: none;
border-radius: 6px;
cursor: pointer;
& when (@size >= 18px) {
padding: 12px 24px;
}
& when (@size < 18px) and (@size >= 12px) {
padding: 8px 16px;
}
& when (@size < 12px) {
padding: 6px 12px;
}
}
.large-btn { .button(#52c41a, 18px); }
.small-btn { .button(#ff4d4f, 12px); }
// ============================
// 3. 循环（Loop）
// ============================
// Sass（SCSS）- for 循环
@for $i from 1 through 6 {
h#{$i} {
font-size: 32px - ($i - 1) * 4px;
margin-bottom: 16px - ($i - 1) * 2px;
}
}
// Sass - each 循环（遍历列表/Map）
$colors: (primary: #1890ff, success: #52c41a, danger: #ff4d4f);
@each $name, $color in $colors {
.text-#{$name} {
color: $color;
}
}
// Less - 递归循环（Less 不支持 for/each）
.generate-headers(@n, @i: 1) when (@i =< @n) {
h@{i} {
font-size: 32px - (@i - 1) * 4px;
margin-bottom: 16px - (@i - 1) * 2px;
}
.generate-headers(@n, (@i + 1));
}
.generate-headers(6);
// ============================
// 4. 函数（Function）
// ============================
// Sass（SCSS）- 自定义函数
@function calculate-rem($px) {
@return $px / 16px * 1rem;
}
@function darken-color($color, $amount: 10%) {
@return darken($color, $amount);
}
.text {
font-size: calculate-rem(16px); // 1rem
color: darken-color(#1890ff); // 更暗的蓝色
}
// Less - 自定义函数（通过 mixin + return）
.calculate-rem(@px) {
@result: @px / 16 * 1rem;
}
.text {
.calculate-rem(16px);
font-size: @result; // 1rem
}📝 总结与展望
Sass/Less 是现代 CSS 开发的标配工具。通过本文的学习，你应该掌握了：
🎯 核心要点
- Sass vs Less：Sass 功能更强，Less 更简单
- 变量：集中管理设计令牌（颜色、字体、间距）
- 嵌套：减少重复选择器，提高可读性
- Mixin：可复用代码块，支持参数、默认值
- 函数：计算值、操作颜色、返回结果
- 循环：生成系列样式（间距、字体、网格）
- 继承：@extend 复用样式，减少 CSS 体积
- 模块化：7-1 模式、ITCSS、BEM + Sass
- 高级特性：条件、插值、Map、List 操作
- 最佳实践：避免深层嵌套、合理使用 Mixin/Function
🚀 未来展望
CSS 预处理器正在演进，值得关注的方向：
- 原生 CSS 变量：浏览器原生支持，运行时可修改
- CSS Nesting：原生嵌套语法（类似 Sass）
- CSS Cascade Layers：@layer 控制优先级
- Tailwind CSS：原子化 CSS，减少预处理器需求
- CSS Modules：局部作用域，替代部分预处理器功能