CSS 预处理器

CSS 预处理器是一种扩展了 CSS 语法功能的 “编程语言”，它允许我们在编写 CSS 时使用变量、函数、条件语句、循环语句等编程特性，最终编译成标准的 CSS 文件再应用到生产环境中。

CSS 预处理器有哪些？

CSS 并不是一门编程语言，我们本身是无法使用编程的方式来编写 CSS。但为了提高开发效率，比如在 CSS 中使用变量、函数等特性，此时就得借助 CSS 预处理器来实现了。

在现在前端开发中，最常用的 CSS 处理器有以下 3 种：

• Sass（最常用）：Sass 是最成熟和功能最强大的 CSS 预处理器之一。它提供了丰富的功能，包括变量、混合（mixins）、函数、继承和控制指令。Sass 有 2 种语法：SCSS（Sassy CSS）和缩进语法。SCSS 是 Sass 的主要语法，并且是 CSS 的超集。

• Less：Less 是一种较为简单的 CSS 预处理器，它使用类似于 CSS 的语法。Less 提供了基本的功能，例如变量、混合（mixins）、函数和导入。Less 易于学习和使用，但功能不如 Sass 强大。

• Stylus：Stylus 是一种灵活的 CSS 预处理器，它允许你省略许多 CSS 语法中的强制部分，例如分号、冒号和花括号等。Stylus 提供了丰富的功能，例如变量、混合（mixins）、函数、条件语句和迭代。

相较于传统 CSS 来说，CSS 预处理器具有以下的优势。

• 提高代码的可维护性：CSS 预处理器允许你使用变量、函数和混合（mixins）等特性，这可以大大减少重复的代码，并使样式表更易于维护。
• 提高代码的可读性：CSS 预处理器支持嵌套规则和代码组织，这可以样式表更易于阅读和理解。
• 支持模块化开发：CSS 预处理器允许你将样式表拆分成多个文件，并使用导入功能（@import）将它们组合在一起，这使得我们更好地组织和管理 CSS 代码。

CSS 预处理器如何使用？

CSS 预处理器编写出来的代码是不能被直接执行，而需要经过 Node.js 编译成标准 CSS 代码才能被使用。它大致的工作原理如下：

1. 使用 CSS 预处理器来编写 CSS。
2. 将 CSS 预处理器编写的 CSS 编译成标准的 CSS。
3. 将编译后的 CSS（即标准 CSS）应用于网页中。

接下来我们通过一个简单的例子，来让大家感性地了解 CSS 预处理器是怎样的一个东西。

示例：使用 CSS 预处理器（Sass 语法）

// 定义变量
$primary-color: red;

// 使用嵌套
.article {
    color: $primary-color;
    > .article-header {
        color: lighten($primary-color, 0.2);
    }
}

分析：

上面代码并不能直接在网页中执行，我们可以将其编译成标准的 CSS 代码，如下所示。

.article {
	color: red;
}

.article > .article-header {
	color: #ff0101;
}

CSS 预处理器大多数情况下都是在 Vue 或 React 项目中使用，而不会单独使用。建议小伙伴们把 Vue 或 React 学了，再去深入了解 CSS 预处理器的语法细节。

当然了，你在学习 CSS 预处理器（如 Sass）时，也可以使用 Sass 转 CSS 这样的在线工具：Sass 转 CSS。

最后，在使用 CSS 预处理器时，小伙伴们还要清楚以下 2 个最佳实践。

• 在 Vue 或 React 项目中，尽量都用 CSS 预处理器来编写 CSS，可以大大提高代码的开发效率。
• 优先使用 Sass，因为它的语法更加严谨，可读性和可维护性也比较高。