5.2 CSS预处理器

5.2.1 预处理器概述

CSS 预处理器是一个能通过预处理器自己独有的语法来生成CSS的程序，它的语法类似于 CSS，但提供了更多的功能和灵活性。预处理器的代码在被浏览器执行之前，会经过一个编译过程，将预处理器代码转换为标准的CSS代码。

（1）CSS预处理器优点：

• 提高开发效率：可以定义变量存储颜色、尺寸等常用值，避免重复书写；模仿HTML的嵌套结构书写CSS，使代码结构更加清晰直观，易于理解和维护，避免了手动重复书写冗长的选择器；可以将一组常用的CSS属性封装成一个混合（Mixins），可以在不同的地方重复调用，提高了代码的复用性。

• 易于维护：因为有可以嵌套、定义变量等特性，使得CSS代码更具逻辑性和可读性，不同模块的样式可以更好地组织在一起，方便查找和修改；可以根据项目的需求轻松扩展和修改样式，新的功能可以通过定义新的变量、混合或函数来实现，而不会影响现有的代码。

• 跨浏览器兼容性：预处理器通常会自动为一些CSS属性添加浏览器前缀，以确保样式在不同的浏览器中都能正确显示。开发人员不需要手动添加这些前缀，减少了出错的可能性。

（2）CSS预处理器缺点：

• 学习曲线：对于不熟悉预处理器的开发者来说，需要花费一定的时间学习新的语法和工具。预处理器的语法虽然相对容易理解，但与普通CSS还是有一定的区别，需要一定的时间来适应。

• 编译过程增加复杂性：需要额外的编译步骤将预处理器代码转换为普通CSS代码，增加开发流程的复杂性。在调试时如果编译过程出现错误，可能需要花费一些时间来排查问题；编译过程可能会影响开发效率，特别是在大型项目中，编译时间可能会比较长。需要合理配置编译工具，以提高编译速度。

• 依赖工具：使用预处理器通常需要依赖特定的工具和环境，如安装预处理器的软件包、配置构建工具等。如果工具出现问题或不兼容，可能会影响开发进度。

5.2.2 Less

Less是一种CSS预处理器，它提供了变量、嵌套、混合（mixins）、函数等功能。Less的一个独特之处在于它支持实时编译，这意味着在开发过程中，每当Less文件发生变化，它都会自动编译成CSS文件。

（1）使用步骤

① 安装依赖：通过以下命令安装“less”和“less-loader”：

② 配置：检查“vue.config.js”文件，确保有正确的配置。如果需要，可以添加或修改以下配置：

③ 使用Less：在需要使用Less的组件style标签“lang”属性中指定，示例代码如下：

（2）Less的特点

① 变量

Less允许在CSS中定义一个变量，并在需要时重新使用，Less中的变量以“@”开头，示例代码如下：

② 混合（Mixins）

Less允许定义一组CSS属性，然后在需要的地方重复使用，示例代码如下：

③ 嵌套规则

Less 提供了使用嵌套代替层叠或与层叠结合使用的能力，例如以下代码块：

用 Less 语言我们可以这样书写这段代码代码：

④ 运算

Less允许在CSS中使用运算符进行加、减、乘、除运算，示例代码如下：

⑤ 函数

Less允许在CSS中定义函数，并在需要的地方调用它们，示例代码如下：

⑥ 嵌套媒体查询

Less允许在CSS规则内嵌套媒体查询，示例代码如下：

⑦ 引入

Less允许你导入其他Less文件，并在当前文件中使用它们的变量、混合等，示例代码如下：

⑧ 循环和条件语句

Less提供了循环和条件语句，如each、for、if等，用于处理更复杂的样式逻辑，示例代码如下：

5.2.3 Sass（Scss）

Sass是一款强化CSS的辅助工具，它支持两种不同的语法，分别是Sass和Scss，两种语法可以互相加载，它在CSS语法的基础上增加了与Less相同的部分功能，如：变量 、嵌套、混合、导入，这些拓展令CSS更加强大与优雅，Scss是Sass3引入新的语法，因此在本指南主要学习Scss。

（1）Sass和Scss区别

Scss是Sass的一个升级版本，完全兼容Sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是Sass是靠缩进表示嵌套关系，Scss则是是花括号来表达，示例代码如下：

（2）使用步骤

① 安装依赖：通过以下命令安装“Sass”：

② 配置：在vite.config.js中添加下面代码以导入Scss：

③ 在styles目录下创建“style.scss”，这个文件主要是我们开发编写样式的CSS文件，示例代码如下：

④ 使用Sass：在需要使用Sass的组件style标签“lang”属性中指定，示例代码如下：

（3）Sass的特点

① 嵌套

简单的嵌套实例

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，示例代码如下：

父选择器

在嵌套CSS规则时，有时也需要直接使用嵌套外层的父选择器，可以用“&”代表嵌套规则外层的父选择器，示例代码如下：

属性嵌套

有些CSS属性遵循相同的命名空间，为了便于管理这样的属性，同时也为了避免了重复输入，Sass允许将属性嵌套在命名空间中，示例代码如下：

② 注释

Sass支持标准的CSS多行注释“/* */”，以及单行注释“//”，前者会被完整输出到编译后的CSS文件中，而后者则不会，示例代码如下：

编译结果如下：

③ 变量

Sass变量以美元符号开头，赋值方法与 CSS 属性的写法一样，示例代码如下：

④ 运算

Sass支持数字的加减乘除、取整等运算，如果必要会在不同单位间转换值，示例代码如下：

⑤ 函数

Sass定义了多种函数，部分函数可以通过普通的CSS语句调用。

简单的Sass函数

带参数变量的Sass函数

使用插值表达式的Sass函数

通过“#{}”插值语句可以在选择器或属性名中使用变量，示例代码如下：

⑥ 自定义Sass函数

Sass支持自定义函数，并能在任何属性值或Sass变量中使用，示例代码如下：

创作说明

名称：编程指南-CSS案例开发从学到用完美实践

版本：2024年

网站：http://www.51xueweb.cn

撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆

指导审核：阮晓龙