CSS预处理器是一种将CSS代码进行扩展和增强的工具，它们提供了更灵活、更强大的功能，使得CSS的开发变得更加高效和可维护。本文将介绍三种主流的CSS预处理器：Less、Sass和Stylus，并给出使用示例。
什么是CSS预处理器？
CSS预处理器是一种将编写过的CSS代码经过处理后生成最终CSS文件的工具。它们基于CSS语法提供了许多扩展功能，如变量、嵌套、混合、条件判断等，大大提高了CSS代码的重用性和可读性。
Less
Less是一种动态样式语言，它扩展了CSS的语法，使得开发者可以使用变量、嵌套、混合等技术来缩减代码量、提高开发效率。Less可以在运行时将Less代码编译成CSS代码，并添加到HTML中。
安装和使用Less
安装Less非常简单，只需将Less的编译器引入HTML文件即可。例如，使用以下代码即可引入Less编译器：
<script src="less.min.js"></script>
然后，将Less代码写在<style>标签中，并给<style>标签添加type="text/less"属性。当页面加载时，Less编译器会自动将Less代码编译成CSS代码并应用到页面上。
Less的使用示例
以下是一个使用Less的示例：
@primaryColor: #ff0000;
body {
color: @primaryColor;
}
.box {
width: 200px;
height: 200px;
background-color: @primaryColor;
}
在上面的代码中，我们定义了一个名为primaryColor的变量，它的值为红色。然后，我们分别在body和.box选择器中使用了这个变量。
Sass
Sass是一种成熟且功能强大的CSS预处理器，它提供了大量的有用功能，如变量、嵌套、混合、继承等等。 Sass有两种语法格式：较早的Sass语法（使用缩进）和较新的SCSS语法（类似于CSS的语法），本文将以SCSS语法为例进行介绍。
安装和使用Sass
要使用Sass，需要先安装Sass的编译器。可以使用Node.js的包管理器npm进行安装，命令如下：
npm install -g sass
安装完成后，在命令行中使用以下命令将SCSS文件编译为CSS文件：
sass input.scss output.css
其中，input.scss为输入的SCSS文件路径，output.css为输出的CSS文件路径。
Sass的使用示例
以下是一个使用Sass的示例：
$primaryColor: #ff0000;
body {
color: $primaryColor;
}
.box {
width: 200px;
height: 200px;
background-color: $primaryColor;
}
在上面的代码中，我们使用了名为primaryColor的变量，并将它的值设为红色。然后，在body和.box选择器中使用了这个变量。
Stylus
Stylus是一种简洁、灵活的CSS预处理器，它的语法比较简单，没有大括号和分号，使用缩进来表示嵌套关系，并支持变量、混合等功能。
安装和使用Stylus
通过npm可以安装Stylus的编译器，命令如下：
npm install -g stylus
安装完成后，在命令行中使用以下命令将Stylus文件编译为CSS文件：
stylus input.styl -o output.css
其中，input.styl为输入的Stylus文件路径，output.css为输出的CSS文件路径。
Stylus的使用示例
以下是一个使用Stylus的示例：
primaryColor = #ff0000
body
color: primaryColor
.box
width: 200px
height: 200px
background-color: primaryColor
在上面的代码中，我们定义了一个名为primaryColor的变量，它的值为红色。然后，在body和.box选择器中使用了这个变量。
总结
CSS预处理器是一种将CSS代码进行扩展和增强的工具，它们提供了更灵活、更强大的功能，如变量、嵌套、混合等。本文介绍了三种主流的CSS预处理器：Less、Sass和Stylus，并给出了使用示例。选择一种适合自己的CSS预处理器，并通过使用它们提高CSS代码的开发效率和可维护性。
