CSS 预处理器是什么：Less/Sass 解决了什么问题

原生 CSS 写多了会发现一个痛点：想用变量统一管理颜色主题却做不到，想在选择器里写嵌套规则也不支持——Less 和 Sass 这类 CSS 预处理器，正是为了补上这些原生 CSS 长期缺失的编程能力而诞生的。

目录

1. 预处理器解决什么问题
2. 变量、嵌套、Mixin：三个最常用的能力
3. 编译：预处理器语法最终都要转成普通 CSS
4. Less 和 Sass 的关系

1. 预处理器解决什么问题

原生 CSS 本质上是一种静态的样式声明语言，早期版本缺乏变量、逻辑判断、代码复用这类编程语言的基本能力——想统一改一个主题色，就要在文件里到处替换同一个色值；想让多个选择器共享一段重复的样式规则，只能反复手动复制粘贴。CSS 预处理器（Less、Sass/SCSS 是最主流的两种）在 CSS 语法基础上扩展出了一套"类编程语言"的写法，让样式代码可以像普通程序代码一样组织，最终再编译成浏览器能识别的标准 CSS。

2. 变量、嵌套、Mixin：三个最常用的能力

• 变量：把颜色、间距、字号等反复使用的数值定义成变量，全局统一修改只需要改变量定义一处，不用满文件搜索替换
• 嵌套：CSS 原生选择器是扁平的，预处理器允许把子元素的样式规则写在父选择器内部嵌套定义，视觉上和 HTML 的层级结构对应，可读性明显更好
• Mixin（混入）：把一组常用的样式声明打包成一个可复用的"函数"，需要用的地方直接调用，避免同一段样式规则在多处重复书写——这也是预处理器"减少重复代码"能力的核心体现

原生 CSS 后来也通过 CSS 变量（--custom-property）部分补齐了变量能力，但嵌套、Mixin 这类更接近编程语言的组织能力，原生 CSS 长期以来依然缺失（浏览器对原生 CSS 嵌套的支持是近几年才逐步跟上的），这也是预处理器至今仍被广泛使用的原因。

3. 编译：预处理器语法最终都要转成普通 CSS

浏览器不能直接识别 Less 或 Sass 语法，这些扩展写法必须先经过编译这一步，转换成纯标准的 CSS 之后才能真正生效——变量被替换成实际数值、嵌套结构被展开成扁平的选择器、Mixin 被展开成具体的样式声明。这个编译过程可以在开发阶段用构建工具（webpack、Vite 等）自动完成，也可以用独立的编译器命令行工具单独跑；在线预处理器工具本质上就是把这个编译过程搬到了浏览器里现场执行，方便快速验证一段代码片段的编译结果，不需要在本地搭建完整的构建环境。

4. Less 和 Sass 的关系

Less 和 Sass 是两套互相独立、语法不完全兼容的预处理器实现，设计理念大体相似（都提供变量、嵌套、Mixin 这类核心能力），但具体语法细节不同（比如 Less 变量用 @ 前缀，Sass 用 $ 前缀）。Sass 有两种书写语法：SCSS（语法更接近标准 CSS，用花括号和分号，是目前更主流的写法）和最初的 Sass 缩进语法（用换行缩进代替花括号，写法更简洁但和 CSS 差异更大）。两者没有绝对的优劣之分，选择更多取决于团队习惯和生态工具链的适配程度——Sass 的功能集（尤其是较新版本 Dart Sass 支持的模块系统）相对更完善，Less 语法更贴近原生 CSS、学习门槛略低。

在线工具：less编译器 · SASS/SCSS转CSS