CSS 预处理器简介：释放 SASS 与 LESS 的强大力量
发布: (2025年12月16日 GMT+8 10:30)
5 min read
原文: Dev.to
Source: Dev.to
什么是 CSS 预处理器？
CSS 预处理器是编译成普通 CSS 的脚本语言。它们为 CSS 添加了原生不存在的编程特性，使编写动态、可重用和模块化的样式更容易。
主要优势
- 变量 用于可重用的值（颜色、字体、间距）
- 嵌套 选择器以实现更清晰的层次结构
- Mixins 用于可重用的 CSS 块
- 函数和运算 用于计算和动态样式
- 模块化结构 使用 partials 和 imports
介绍 SASS（语法上很棒的样式表）
SASS 可能是最广泛采用的 CSS 预处理器。最初基于 Ruby 构建，现在作为 Dart Sass 维护，它提供两种语法风格：
- SCSS（Sassy CSS） – 看起来像普通 CSS，但支持所有 SASS 功能。推荐大多数用户使用。
- 缩进语法 – 使用缩进代替大括号和分号。
SCSS 示例
$primary-color: #3498db;
nav {
background-color: $primary-color;
ul {
list-style: none;
}
li {
display: inline-block;
margin-right: 20px;
}
}这会编译成普通 CSS，变量被替换，嵌套被展开。
介绍 LESS（更简洁的样式表）
LESS 是另一款流行的 CSS 预处理器，最初使用 JavaScript 开发，因而能够轻松集成到网页项目中。它的语法与 SASS 的 SCSS 非常相似，支持变量、嵌套、混入（mixins）以及运算等特性。
LESS 示例
@primary-color: #3498db;
nav {
background-color: @primary-color;
ul {
list-style: none;
}
li {
display: inline-block;
margin-right: 20px;
}
}SASS 与 LESS 的主要区别
| 特性 | SASS | LESS |
|---|---|---|
| 原始平台 | Ruby（现为 Dart Sass） | JavaScript |
| 语法 | SCSS（类 CSS）和缩进式 | 类 CSS |
| 变量 | $variable | @variable |
| 函数 / 混入 | 内置功能更为丰富 | 更简洁，内置函数更少 |
| 社区与工具 | 社区规模更大，生态系统更完整 | 受欢迎，但规模小于 SASS |
| 集成 | 被众多构建工具支持 | 可通过 less.js 在浏览器中轻松运行 |
为什么使用 CSS 预处理器？
- 可维护性 – 使用变量集中管理颜色、字体和常量。
- 可扩展性 – 使用局部文件和导入模块化你的样式表。
- 生产力 – 使用嵌套和 mixins 编写更简洁、逻辑化的样式。
- 高级特性 – 执行数学运算，定义可复用函数，自动化重复任务。
如何入门
大多数现代项目使用 Webpack、Gulp 或专用 CLI 工具等构建工具，将 SASS 或 LESS 文件编译为 CSS。许多框架和 CMS 也开箱即集成了预处理器。
基本步骤
- 安装编译器（SASS 使用
sass，LESS 使用lessc）。 - 使用变量、嵌套等特性编写
.scss或.less文件。 - 将它们编译为浏览器使用的
.css文件。 - 更新 HTML，以引用编译后的 CSS。
最后思考
像 SASS 和 LESS 这样的 CSS 预处理器通过在样式之上添加强大的编程范式，彻底改变了我们编写 CSS 的方式。它们有助于创建更简洁、更易维护且更高效的样式表——这是现代网页开发的必备。无论你选择 SASS 还是 LESS，学习如何充分利用这些工具都能提升你的生产力和 CSS 代码的质量。
查看 YouTube Playlist ，获取从基础到高级主题的精彩 CSS 内容。