Sass和Less通过变量、嵌套、混合等特性提升CSS开发效率，需编译为标准CSS；Sass使用$定义变量并支持嵌套，通过sass命令编译，Less使用@定义变量，通过lessc编译，两者均可集成到Webpack等构建工具中实现自动编译，提升项目维护性与开发体验。
在CSS中使用预处理器如Sass或Less，主要是通过编写更简洁、结构化的代码，然后将其编译为标准的CSS文件供浏览器使用。下面介绍如何实际使用它们。
什么是CSS预处理器
预处理器（如Sass和Less）是CSS的扩展语言，提供了变量、嵌套规则、混合（mixins）、函数等编程特性，让你更高效地编写样式表。Sass 使用 .scss 或 .sass 文件格式，Less 使用 .less 文件格式。
如何使用Sass
Sass 是目前最流行的CSS预处理器之一，基于Ruby开发，现在也支持通过Dart Sass进行编译。
- 安装Sass：可以通过npm安装Dart Sass（推荐方式）
npm install -g sass - 创建一个 style.scss 文件，例如：
.container {
background-color: $primary-color;
.header {
padding: 20px;
color: white;
}
}
- 编译SCSS为CSS：
sass style.scss style.css - 启用监听模式自动编译：
sass --watch style.scss style.css
如何使用Less
Less 基于JavaScript，通常通过Node.js环境运行。
立即学习“前端免费学习笔记（深入）”；
- 安装Less：
npm install -g less - 创建一个 style.less 文件，例如：
.container {
background-color: @primary-color;
.header {
padding: 20px;
color: white;
}
}
- 编译Less为CSS：
lessc style.less style.css
集成到项目工作流
在现代前端开发中，通常将Sass或Less集成到构建工具中，比如Webpack、Vite或Gulp。
- 使用Webpack时，添加 sass-loader 和 css-loader
- 在Vue或React项目中，可以直接在单文件组件中使用 <style lang="scss">
- 设置开发服务器自动编译，提升开发效率
基本上就这些。选择Sass还是Less取决于团队习惯，Sass生态更成熟，使用更广泛。掌握一种预处理器能显著提升CSS的可维护性和开发体验。
