CSS预处理器是一种将类似编程语言的语法扩展应用到CSS中的工具。它们允许您使用变量、函数、嵌套规则、操作符等高级功能来编写CSS代码，从而提高CSS代码的可读性和可维护性。常见的CSS预处理器包括Sass、Less和Stylus等。
下面是使用Sass编写CSS代码的示例：
```scss
// 定义变量
$primary-color: #007bff;
// 定义混合宏
@mixin button-styles {
display: inline-block;
padding: 0.5rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.25;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
background-color: $primary-color;
border-color: $primary-color;
&:hover {
background-color: darken($primary-color, 10%);
border-color: darken($primary-color, 10%);
}
}
// 使用混合宏
.button {
@include button-styles;
}
```
上述代码中，我们定义了一个名为`$primary-color`的变量，用于存储主色调。然后，我们定义了一个名为`button-styles`的混合宏，用于设置按钮的样式。最后，我们使用`@include`指令将`button-styles`混合宏应用于`.button`选择器。
使用CSS预处理器可以大大简化CSS代码的编写过程，并提高代码的可读性和可维护性。
