Less
以变量、Mixin、嵌套和函数扩展 CSS 的 JavaScript 预处理语言。
项目概述
Less 保持接近 CSS 的语法，在构建时解析变量、参数化 Mixin、Guard、函数和嵌套规则，并输出浏览器可直接使用的标准 CSS。
Less 是采用 Apache-2.0 许可证、由 JavaScript 实现的 CSS 预处理语言。它让开发者在熟悉的 CSS 结构中加入 @variable 变量、嵌套选择器、参数化 Mixin、Guard、颜色与数学函数、Ruleset Map、Extend 和增强型 @import，再通过 lessc、Node.js API 或 Bundler 编译为普通 CSS。Less 变量采用延迟求值，同一变量可在定义前引用并由当前或定义作用域解析；Mixin 既能复用声明，也能接受参数、匹配模式并用 when Guard 表达条件。Vite 等工具在安装 less 包后可直接处理 .less 文件，因此 Less 仍常见于已有前端工程、Ant Design 主题定制和传统组件库。
主要特点
Less 以接近 CSS 的语法提供变量、复用、条件和编译期计算，并通过 JavaScript API 与插件扩展构建能力。
变量与延迟求值
@variable 可保存颜色、尺寸、字符串、选择器和 Ruleset；Less 在使用位置解析值，允许先引用后定义和后续覆盖。
嵌套规则
选择器、媒体查询和 At-rule 可以按组件结构嵌套，& 引用父选择器以表达伪类、状态和 Modifier。
参数化 Mixin
类或专用 Mixin 可以接收位置参数、命名参数、默认值和可变参数，并把一组声明或嵌套规则注入调用方。
Guard 条件匹配
when、not、and 和类型检查函数可根据参数、媒体特征或配置变量选择不同 Mixin 实现。
函数与颜色运算
内置函数覆盖颜色混合、通道、单位、数学、List、String 和类型判断，可在编译期计算设计值。
Ruleset 与 Map 查找
Detached Ruleset 可以保存一组变量和规则，并通过 [] 查找值，适合组织主题配置和命名空间。
Extend 与增强导入
:extend 可合并选择器以减少重复声明；@import 支持 reference、inline、optional、multiple 等处理模式。
CLI、Node API 与插件
lessc 提供监听外的单次编译能力，less.render 可嵌入 JavaScript 工具，插件还可扩展函数、Visitor、File Manager 和预处理流程。
适用场景
适合维护现有 Less 代码库、定制基于 Less 变量的组件体系，或需要轻量 CSS 预处理能力的项目。
已有 Less 代码库
适合持续维护由变量、Mixin 和嵌套规则构成的老牌后台、门户、电商和企业前端。
组件库主题定制
通过覆盖公开变量编译不同品牌主题，尤其适合仍以 Less Token 作为定制入口的组件库。
设计令牌与规则生成
使用变量、Ruleset Map、Mixin 和循环生成颜色、间距、栅格或组件状态样式。
传统服务端与静态页面
Less 可独立编译为静态 CSS，不要求 React、Vue 或其他客户端框架。
轻量预处理需求
当团队只需要变量、嵌套、颜色函数和少量复用时，Less 能保持非常接近 CSS 的作者体验。
JavaScript 自定义构建
Node.js API、Importer 和 Plugin 适合把 Less 集成到内部主题编译器、文档工具或资产流水线。
优点与注意事项
技术选型不仅要看能力，也要理解它带来的团队成本。
主要优点
Less 擅长的地方
- 语法接近标准 CSS，已有样式可以通过修改扩展名逐步采用
- 变量、Mixin、Guard、函数和 Ruleset Map 能覆盖常见预处理需求
- JavaScript 实现便于通过 npm、Vite、Webpack 和 Node.js API 集成
- 增强型 @import 与 reference 模式适合复用大型样式库的局部能力
- 编译结果是普通 CSS，浏览器不需要加载 Less 运行时
- 成熟生态和长期兼容性适合维护已有 Less 资产与主题系统
需要注意
采用前应考虑的问题
生产环境应在构建阶段把 .less 编译为 CSS；浏览器端 less.js 更适合演示和快速实验，会增加下载、解析与首屏成本。
Less 变量和 Mixin 有作用域，但生成的 CSS 选择器默认仍是全局的，需要 BEM、CSS Modules 或其他隔离方案。
变量可在定义前使用并被后续定义影响，灵活覆盖的同时也可能让最终值难以从源码顺序直接判断。
Mixin 从调用方读取变量、向调用方泄漏成员以及省略括号等历史语法存在弃用路径，新代码应显式传参并使用明确命名空间。
过度映射 DOM 层级会增加特异性和耦合，嵌套应主要用于状态、伪类和少量上下文。
Mixin 会复制声明，Extend 会合并并扩展匹配选择器；滥用可能分别造成重复 CSS 或意外庞大的选择器集合。
@import 会合并作用域和样式，虽然 Namespace、reference 和 Map 可以改善组织，但不等同于 Sass @use 的严格模块 API。
Less 编译语言特性，不会根据 Browserslist 自动补齐所有前缀；常需继续交给 PostCSS、Autoprefixer 或 Bundler 优化。
快速开始
在 Vite 项目中安装 less，拆分 Token、Mixin 和组件文件，再使用 Vite 内建预处理支持自动编译。
bashnpm create vite@latest less-app -- --template vanilla-ts
cd less-app
npm install
npm install -D lessless@brand: #1d365d;
@surface: #ffffff;
@text: #0f172a;
@radius: 0.75rem;
@tablet: 48rem;less.focus-ring(@color: @brand) {
outline: 3px solid fade(@color, 55%);
outline-offset: 3px;
}
.respond(@min; @rules) {
@media (min-width: @min) {
@rules();
}
}
.button-tone(@tone) when (@tone = brand) {
background: @brand;
color: white;
}
.button-tone(@tone) when (@tone = neutral) {
background: @surface;
color: @text;
}less@import (reference) "./tokens.less";
@import (reference) "./mixins.less";
.button {
.button-tone(brand);
padding: 0.75rem 1rem;
border: 0;
border-radius: @radius;
font-weight: 700;
cursor: pointer;
&:hover {
background: darken(@brand, 8%);
}
&:focus-visible {
.focus-ring();
}
}less@import "./styles/tokens.less";
@import "./styles/mixins.less";
@import "./styles/button.less";
.card {
width: min(32rem, 100%);
padding: 1.5rem;
border-radius: @radius;
background: @surface;
color: @text;
.respond(@tablet; {
padding: 2rem;
});
}typescriptimport "./main.less";
document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
<main class="card">
<h1>Less</h1>
<button class="button">开始使用</button>
</main>
`;bash# 命令行编译并生成 Source Map
npx lessc src/main.less dist/main.css --source-mapjavascriptimport less from "less";
const source = `
@brand: #1d365d;
.button { background: @brand; color: white; }
`;
const result = await less.render(source, {
filename: "src/button.less",
sourceMap: { sourceMapFileInline: true },
});
console.log(result.css);bashnpm run dev
npm run build
npm run preview下一步：生产项目应在构建阶段编译 Less，不要依赖浏览器端 less.js。Mixin 调用使用明确的括号和参数，避免依赖已弃用的调用方作用域行为，并始终检查最终 CSS 的选择器和体积。
类似项目
这些方案都能扩展 CSS 作者体验，但在语言模块、插件系统、局部作用域和语法自由度上采用不同设计。
Less vs Sass
Less 和 Sass 都是成熟的 CSS 预处理语言，提供变量、嵌套、Mixin、函数和编译期计算。Less 使用 JavaScript 实现、语法紧贴 CSS，并以 Guard、Ruleset Map 和增强型 @import 形成自己的模型；Sass 由 Dart Sass 定义当前语言，拥有更严格的 @use / @forward 模块系统和更丰富的内置模块、数据处理及控制流。
| 比较维度 | Less | Sass |
|---|---|---|
| 主要语法 | CSS 风格 .less，以 @name 表示变量 | SCSS 或缩进式 Sass，以 $name 表示变量 |
| 官方实现 | JavaScript 编写的 Less.js | Dart 编写并发行到多种环境的 Dart Sass |
| 模块组织 | @import、Namespace、reference 与 Ruleset Map | @use、@forward、命名空间和可配置模块 |
| 条件逻辑 | Guarded Mixin、模式匹配和 when | @if、@else、@each、@for 与 @while |
| 复用方式 | Mixin、Extend、Detached Ruleset 和 Map 查找 | Mixin、Function、Extend、Placeholder 与 Module |
| JavaScript 集成 | 原生 less.render、Plugin 和 File Manager API | sass / sass-embedded 的现代 JS API 与 Importer |
| 生态现状 | 常见于既有项目和部分基于 Less Token 的组件库 | 新旧项目覆盖更广，现代模块系统与文档更完整 |
| 更适合 | 已有 Less 资产、JavaScript 工具链和轻量预处理需求 | 复杂样式库、严格模块 API 和丰富编译期逻辑 |
已有 Less 代码库或依赖 Less 变量定制的组件体系通常应继续使用 Less，并逐步移除弃用的作用域写法；新项目若需要更严格的模块边界、丰富的数据函数和控制流，Sass 通常更完整。两者最终都生成全局 CSS，仍要搭配命名规范、CSS Modules 或其他隔离方式，并按目标浏览器继续进行后处理。
资料核验
版本、维护信息与本页采用的官方资料来源。
本页依据 Less 官方入门、Features In-Depth、工具文档和 Less.js 官方源码仓库整理。版本通过 npm 官方 Registry 核验；快速开始采用当前 less 包、Vite 内建预处理支持和明确括号的现代 Mixin 调用。
官方仓库未归档，核验时最近可见的代码活动日期为 2026 年 7 月 26 日。该状态表示项目近期仍有公开维护活动，不代表固定发布频率或长期支持承诺。