Less

当需要为大型项目编写可维护的 CSS 时，Less 提供了变量、混合、嵌套、运算等动态扩展，让样式表更简洁且易于复用。它运行于 Node.js 或浏览器端，编译输出标准 CSS。

核心功能

Less 在 CSS 基础上增加了变量、混合（Mixin）、嵌套、运算、函数、命名空间与映射等特性，所有语法向后兼容 CSS。

• 变量：用 @ 定义，如 @width: 10px; 可在同一值多处引用时统一维护。
• 混合：将一组属性混入另一规则集，支持带括号、参数化、模式匹配和递归。
• 嵌套：按 HTML 结构书写选择器，避免重复父级，并支持 & 引用父选择器。
• 运算：+、-、*、/ 可作用于数字、颜色和变量，自动处理单位换算；calc() 内不计算表达式但会替换变量。
• 函数：内置颜色转换、字符串处理、数学运算函数，如 darken()、percentage()、spin()。
• 映射：将混合或规则集当作键值对使用，通过 #colors[primary] 取值。
• 命名空间：用 #bundle() 分组混合，避免输出到 CSS 中。
• 转义：通过 ~"任意字符串" 插入不被编译的 CSS 片段。
• 作用域：变量先查找本地，再继承父级，支持惰性求值（最后定义生效）。
• 导入：@import 可引入 .less 或 .css 文件，支持 reference、inline、once 等选项。

适合谁用

前端开发者、需要维护大量样式表的团队、希望减少 CSS 重复代码的项目。Less 语法与 CSS 高度相似，学习曲线平缓。

• CSS 开发者：无需学习全新语法，仅增加变量、混合等少量扩展即可上手。
• 大型项目团队：通过变量统一颜色/尺寸，混合复用样式块，嵌套保持结构清晰。
• Node.js 用户：通过 npm install -g less 安装命令行工具，使用 lessc 编译。
• 浏览器端用户：在 HTML 中引入 less.js 和 .less 文件，实时编译。

与同类工具的差异

Less 于 2009 年由 Alexis Sellier（@cloudhead）创建，最初受 Sass 启发，但采用更接近 CSS 的语法。Sass 后来受 Less 影响创建了 SCSS。

• 语法贴近 CSS：Less 直接使用 @ 变量和 {} 规则集，无需缩进敏感语法。
• JavaScript 实现：最初用 Ruby 编写，后移植为 JavaScript，可在 Node.js 和浏览器中运行。
• 社区生态：官方维护 Less.js，有丰富的第三方工具和中文文档。
• 版本迭代：当前稳定版 v4.1.3，持续更新。

常见问题

Q1：Less 中的变量作用域是怎样的？

A1：变量先查找当前作用域，若无则继承父级。支持惰性求值：使用前不必声明，同一变量多次定义时取最后一个有效值（从当前作用域向上搜索）。例如 @var: 0; .class { @var: 1; } 中 .class 内 @var 值为 1。

Q2：Less 的 calc() 如何处理数学表达式？

A2：calc() 内的数学运算不会被 Less 计算，但会替换变量和嵌套函数。例如 @var: 50vh/2; width: calc(50% + (@var - 20px)); 输出 calc(50% + (25vh - 20px))。

Q3：Less 支持哪些导入选项？

A3：支持 reference（仅引用不输出）、inline（原样包含）、less（强制作为 Less 处理）、css（强制作为 CSS 处理）、once（默认只导入一次）、multiple（允许重复导入）、optional（文件不存在时不报错）。

更多同类工具与网站,可在预编译工具分类继续挑选。

信息核实于 2026年7月,具体以官网为准。