在原生CSS的开发过程中，开发者经常会遇到重复书写相同属性值、选择器层级嵌套繁琐、无法复用通用样式逻辑等问题，这些问题会大幅提升样式代码的维护成本。css preprocessor就是为解决这些痛点诞生的工具，它允许开发者使用类似编程的语法编写样式，再通过编译生成原生CSS文件，从多个维度优化样式书写的体验。
主流css preprocessor类型
目前行业内常用的css preprocessor主要有两种，分别是Sass和Less，两者核心能力相似，语法细节略有差异，开发者可以根据项目需求选择：
- Sass：最早诞生的预处理工具之一，支持两种语法格式，分别是缩进式的Sass语法和类CSS语法的Scss格式，生态完善，兼容性强。
- Less：语法更接近原生CSS，学习成本更低，在浏览器端也可以直接运行编译，适合中小型项目快速上手。
核心优化特性及使用方式
1. 变量减少重复书写
原生CSS中如果多个地方需要使用同一个颜色值或尺寸值，修改时需要逐个替换，使用预处理器的变量功能可以统一维护这些公共值。
以Scss为例，定义和使用变量的代码如下：
// 定义主题色和通用间距变量
$primary_color: #1890ff;
$default_padding: 16px;
// 使用变量
.header {
background-color: $primary_color;
padding: $default_padding;
}
.button {
border: 1px solid $primary_color;
padding: $default_padding 24px;
}
2. 嵌套简化选择器层级
原生CSS书写嵌套选择器时需要重复写父级选择器，预处理器支持嵌套语法，让样式结构更清晰。
Less的嵌套语法示例如下：
// 原生CSS需要写成 .nav {}, .nav .item {}, .nav .item:hover {}
.nav {
width: 100%;
background: #fff;
.item {
display: inline-block;
margin-right: 20px;
&:hover {
color: $primary_color;
}
}
}
3. 混合实现样式复用
对于需要重复使用的样式组合，预处理器提供了混合（Mixin）功能，类似函数的逻辑，可以传入参数生成不同的样式。
Sass的混合使用示例：
// 定义带参数的混合，设置弹性布局
@mixin flex_layout($direction: row, $justify: center, $align: center) {
display: flex;
flex-direction: $direction;
justify-content: $justify;
align-items: $align;
}
// 使用混合
.card {
@include flex_layout(column, space-between);
width: 300px;
height: 200px;
}
.list {
@include flex_layout(row, flex-start);
gap: 12px;
}
4. 函数和运算提升逻辑能力
预处理器内置了常用的样式处理函数，也支持自定义函数，同时可以直接进行数值运算，减少手动计算的工作。
Scss的运算和函数使用：
// 内置函数处理颜色，将主题色调暗10%
$dark_primary: darken($primary_color, 10%);
// 数值运算计算容器宽度
$sidebar_width: 240px;
$content_width: 100% - $sidebar_width;
.sidebar {
width: $sidebar_width;
}
.content {
width: $content_width;
background: $dark_primary;
}
预处理工具的基础配置
使用css preprocessor需要先配置编译环境，以Sass为例，通过npm安装后即可在项目中编译Scss文件：
// 安装Sass编译工具 npm install sass --save-dev // 编译命令，将src目录下的scss文件编译到dist目录的css文件 npx sass src/scss:dist/css --watch
如果是使用构建工具的项目，比如Webpack或者Vite，只需要在配置文件中添加对应的预处理器 loader 即可，无需手动执行编译命令，工具会自动在构建过程中完成样式转换。
使用注意事项
虽然css preprocessor能大幅提升开发效率，但使用时也需要注意几个问题：首先不要过度嵌套选择器，嵌套层级最好控制在3层以内，避免生成的CSS选择器优先级过高难以覆盖；其次变量和混合的命名要规范，避免和其他样式冲突；最后编译后的CSS文件需要做好兼容性处理，配合Autoprefixer等工具添加浏览器前缀，确保样式在不同环境下正常展示。
css_preprocessorSassLess样式优化修改时间：2026-07-07 23:15:26