CSS预处理器

• 383 字 • 阅读约 2 分钟 • 最近更新: July 7, 2025

CSS 预处理器引入了编程语言中的一些特性，如变量、嵌套、混入（Mixin）和函数，极大地提升了 CSS 的可维护性和开发效率。

如何开始使用

  1. 安装: 根据你选择的预处理器，安装相应的编译工具。最常见的方式是通过 Node.js 的包管理器 npm 进行安装。

    • npm install -g sass
    • npm install -g less
    • npm install -g stylus

  2. 编写代码: 创建一个 .scss、.less 或 .styl 文件，并开始使用预处理器的特性编写样式。

  3. 编译: 使用命令行工具将你的预处理器文件编译成一个标准的 .css 文件。

    • sass input.scss output.css
    • lessc input.less output.css
    • stylus input.styl -o output.css

    为了提高效率，通常会使用构建工具（如 Vite, Webpack）或代码编辑器的插件来自动监视文件变化并实时编译。

主流的 CSS 预处理器

特性 Sass (SCSS) Less Stylus
简介 功能最强大、最成熟的预处理器，拥有活跃的社区。 语法比 Sass 更简单，学习曲线平缓。 语法极其灵活，甚至可以省略花括号、分号和冒号。
语法 使用 .scss 扩展名时，完全兼容 CSS 语法。 语法类似 CSS，易于上手。 语法非常简洁，类似于 Python。
依赖 需要 Ruby 或 Dart 环境来编译（推荐 Dart Sass）。 需要 Node.js (npm) 或直接在浏览器中使用 less.js。 需要 Node.js (npm)。
变量 $variable @variable variable
混入 @mixin 和 @include .mixin-name mixin-name()

选择建议:

  • 新手入门或快速项目: 推荐 Less，因为它语法简单，上手快。
  • 大型复杂项目: 推荐 Sass (SCSS)，因为它功能强大，生态系统完善，工具链成熟。
  • 追求极简和灵活: 喜欢 Python 风格的开发者可能会喜欢 Stylus。

变量 (Variables)

想象一下，在你的网站项目中，主色调、字体大小、边距等值被反复使用。如果需要修改，你必须在所有文件中手动替换，非常繁琐且容易出错。

变量允许你存储这些值，并在需要时重复使用。当需要修改时，只需改变变量的值即可。

示例 (使用 Sass/SCSS 语法):

scss 
// 定义变量
$primary-color: #3498db;
$base-font-size: 16px;

// 使用变量
body {
  color: $primary-color;
  font-size: $base-font-size;
}

a {
  color: $primary-color;
  &:hover {
    color: darken($primary-color, 10%); // 使用函数改变颜色
  }
}

编译后的 CSS:

css 
body {
  color: #3498db;
  font-size: 16px;
}

a {
  color: #3498db;
}

a:hover {
  color: #2980b9;
}

嵌套 (Nesting)

在原生 CSS 中，你需要反复写父选择器来定义子元素的样式。嵌套功能允许你像 HTML 结构一样，将子选择器的样式写在父选择器内部，使代码结构更清晰、更易读。

示例 (使用 Sass/SCSS 语法):

scss 
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;

      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
  }
}

编译后的 CSS:

css 
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

混入 (Mixins)

混入（Mixin）类似于一个可以重复使用的样式代码块。当你发现需要在多个地方应用一组相同的 CSS 声明时，就可以定义一个混入，然后在任何需要的地方“调用”它。混入还可以接受参数，使其更加灵活。

示例 (使用 Sass/SCSS 语法):

scss 
// 定义一个带参数的混入
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

// 使用混入
.box {
  @include border-radius(10px);
}

.button {
  @include border-radius(5px);
}

编译后的 CSS:

css 
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

继承 (Extend)

继承允许一个选择器的样式继承另一个选择器的所有样式，并在此基础上添加自己的特定样式。这有助于减少重复代码，并保持样式的一致性。

示例 (使用 Sass/SCSS 语法):

scss 
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

编译后的 CSS:

css 
.message, .success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

总结

CSS 预处理器通过引入变量、嵌套、混入和继承等编程概念，彻底改变了编写和维护 CSS 的方式。它让你的样式代码变得更加简洁 (DRY - Don’t Repeat Yourself)、结构化和易于维护。

虽然现在 CSS 原生也逐渐支持了部分类似功能（如 CSS 变量），但预处理器在功能完整性和成熟度上依然占据优势，是现代 Web 开发工具链中不可或缺的一环。