Less（CSS 预处理器）

Less（Leaner Style Sheets 的缩写）是一种 CSS 预处理语言，由 Alexis Sellier 于 2009 年创建。它在保持与 CSS 语法完全兼容的前提下，扩展出变量、嵌套规则、混入（mixin）、运算和函数等编程能力，源文件经编译器处理后生成浏览器可直接使用的标准 CSS。任何合法的 CSS 文件本身就是合法的 Less 文件，因此迁移成本很低。

概述

原生 CSS 长期缺乏变量与逻辑复用手段，大型项目里颜色、间距等取值散落各处，维护困难。Less 与 Sass 同属解决这一问题的预处理器流派：Less 最初用 Ruby 实现，后改用 JavaScript 重写（less.js），这使它既能在 Node.js 中编译，也能直接在浏览器端实时编译（生产环境不推荐）。语法上，Less 用 @ 符号声明变量（如 @primary-color），支持选择器嵌套与 & 父选择器引用、以类为形式的混入、色彩函数（如 darken、lighten）、guard 条件表达式等。历史上，Bootstrap 3 使用 Less 编写（第 4 版起转向 Sass）；蚂蚁集团的 Ant Design 组件库长期以 Less 变量作为主题定制机制，是国内前端项目大量接触 Less 的重要原因。

核心特点

• 兼容 CSS：标准 CSS 即合法 Less，学习与迁移门槛低。
• 变量与运算：集中管理设计变量，支持数值与颜色运算。
• 嵌套与混入：按结构组织选择器，样式片段可参数化复用。
• JavaScript 实现：通过 less.js 可在 Node.js 或浏览器中编译。

应用场景

Less 常见于使用 Ant Design 的中后台项目、老版 Bootstrap 项目以及需要主题变量体系的组件库。Webpack 通过 less-loader、Vite 通过内置的预处理器支持都可无缝编译 Less。近年来，CSS 原生自定义属性、嵌套语法逐步标准化，加上 Sass 生态更庞大、PostCSS 与 Tailwind 等方案兴起，新项目选择 Less 的比例有所下降，但存量工程依然广泛。

常见问题

问：Less 和 Sass 怎么选？答：两者能力高度重叠。用 Ant Design 或维护老 Bootstrap 项目常顺势用 Less；追求更强的模块系统与函数能力、或团队已有惯例时多选 Sass，新项目也可直接考虑原生 CSS 变量加嵌套。

问：Less 变量和 CSS 自定义属性有什么区别？答：Less 变量在编译期被替换为具体值，运行时不存在；CSS 自定义属性保留在运行时，可被 JavaScript 修改并支持按作用域覆盖，两者可以配合使用。

问：浏览器能直接运行 Less 吗？答：可以引入 less.js 在浏览器端实时编译，但会拖慢渲染，仅适合演示调试，生产环境应在构建阶段预先编译成 CSS。