Less.js 备忘清单：CSS 预处理器核心语法与内置函数实战速查-平芜编程栈

Less.js 备忘清单：CSS 预处理器核心语法与内置函数实战速查

【免费下载链接】reference面向开发者的技术速查清单（Cheat Sheets）集合，整理常见技术、工具与开发流程，帮助快速查阅关键信息，提高开发效率。项目地址: https://gitcode.com/GitHub_Trending/referen/reference

Less（Leaner Style Sheets）是向后兼容 CSS 的扩展语言，本指南以仓库 docs/lessjs.md 为骨架，系统梳理变量、混合、嵌套、运算、映射、作用域等核心语法，以及逻辑、字符串、列表与数学/颜色函数的完整用法，并给出可复制的编译示例与预期输出，帮助你快速上手 Less 并融入实际样式工程。

入门

介绍

Less 是一门向后兼容的 CSS 扩展语言，它在不改变 CSS 语义的前提下，引入变量、混合（Mixin）、嵌套、运算、函数等编程能力，让样式表更易维护、更可复用。本仓库在 README.md 的 CSS 分类中收录了 Less.js 速查页，与 Sass、Stylus、Tailwind CSS 等同类预处理器/样式方案并列，方便开发者横向对比查阅。

CSS 备忘清单：Less 编译产物的基础语法参考；
在线编译预览（lesscss.org 提供）：粘贴 Less 代码即可实时查看编译结果，适合验证本清单中的各类示例。

在 Node.js 环境中使用 Less

Less 以 npm 包形式发布，全局安装后通过lessc命令行工具将.less文件编译为.css：

$ npm install -g less $ lessc styles.less styles.css

lessc第一个参数为输入文件，第二个参数为输出文件；也可以不指定输出文件，此时编译结果直接打印到标准输出，便于在脚本或 CI 流程中进一步处理。

在浏览器环境中使用 Less

开发调试阶段可以直接在浏览器中加载 Less 运行时：

<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less@4"></script>

注意两点：link标签的rel必须写成stylesheet/less，且less.js运行时脚本要放在link之后加载；生产环境仍然建议预先编译为 CSS，以减少首屏的实时编译开销。

变量（Variables）

Less 使用@声明变量，变量可以参与运算并引用其他变量：

@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }

编译 css 为：

#header { width: 10px; height: 20px; }

变量让设计令牌（间距、色板、字体尺寸）集中管理，一处修改全局生效；结合后文的“作用域（Scope）”与“懒加载”机制，变量声明可以出现在使用位置之后，这为按模块组织变量提供了灵活性。

混合（Mixins）

混合允许把一组属性打包成可复用的规则集，通过调用（带括号）的方式注入到其他选择器中：

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); }

.bordered声明一次，#menu a与.post a各自调用后都会获得相同的边框样式，避免重复书写公共属性。混合还可以接收参数、定义默认值，是构建“样式函数库”的基础。

嵌套（Nesting）

嵌套让后代选择器的书写更贴近 HTML 层级结构。传统 CSS 需要逐级展开：

#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; }

👇👇 更改为 less 的写法 ✅ 👇👇

#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }

嵌套减少重复的前缀书写，结构一目了然；子规则会被编译为后代选择器（#header .navigation），与原生 CSS 中的空格后代组合语义一致。

父选择器 &

&引用当前选择器的父级，常用于拼接类名（BEM 风格）与伪类：

.button { color: blue; &-ok { background-image: url("ok.png"); } &:hover { color: green; } }

编译 css 为：

.button { color: blue; } .button-ok { background-image: url("ok.png"); } .button:hover { color: green; }

&-ok会拼出.button-ok这类派生类名，&:hover则生成.button:hover，让“块 + 修饰符”“块 + 状态”的模式无需重复书写根类名。

@规则嵌套和冒泡

@media等 @规则可以直接嵌套在规则集内部，编译时会被“冒泡”到外层，并自动合并媒体条件：

.component { width: 300px; @media (min-width: 768px) { width: 600px; @media (min-resolution: 192dpi) { background-image: url(/img/icon2x.png); } } @media (min-width: 1280px) { width: 800px; } }

编译 css 为：

.component { width: 300px; } @media (min-width: 768px) { .component { width: 600px; } } @media (min-width: 768px) and (min-resolution: 192dpi) { .component { background-image: url(/img/icon2x.png); } } @media (min-width: 1280px) { .component { width: 800px; } }

观察编译结果：内层@media (min-resolution: 192dpi)与外层@media (min-width: 768px)通过and合并；同属一个组件的响应式代码收敛在组件内部，维护时无需在文件尾部单独维护媒体查询块。

运算（Operations）

算术运算符+、-、*、/对任何数字、颜色或变量进行运算，并尽量保留单位：

@conversion-1: 5cm + 10mm; // 结果是 6cm @conversion-2: 2 - 3cm - 5mm; // 结果 -1.5cm @incompatible-units: 2 + 5px - 3cm; // 结果是 4px @base: 5%; @filler: @base * 2; // 结果是 10% @other: @base + @filler; // 结果是 15% @base: 2cm * 3mm; // 结果是 6cm @color: (#224488 / 2); // 结果是 #112244 background-color: #112244 + #111; // 结果是 #223355 @color: #222 / 2; // 结果是 `#222 / 2`, not #111 background-color: (#FFFFFF / 16); // 结果是 #101010

几个值得注意的细节：

可换算的单位（如cm与mm）会先换算再运算，5cm + 10mm得6cm；不可换算的单位组合按第一个单位参与运算（2 + 5px - 3cm得4px）；
颜色支持通道级运算：#224488 / 2得到#112244，#112244 + #111得到#223355；
除法必须用括号包裹才会被计算（(#FFFFFF / 16)得#101010），裸写#222 / 2会原样输出为#222 / 2。

calc() 特例

为了与CSS保持兼容，calc()并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值：

@var: 50vh/2; width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))

即：calc()内部的整体表达式原样保留给浏览器处理，但其中引用变量/子表达式的部分（@var→25vh）仍会先行求值。

转义（Escaping）

转义让原本会被 Less 当作语法的字符串原样输出，早期写法使用~"..."：

@min768: ~"(min-width: 768px)"; .element { @media @min768 { font-size: 1.2rem; } }

编译 css 为：

@media (min-width: 768px) { .element { font-size: 1.2rem; } }

从 Less 3.5 开始，可以简写为：

@min768: (min-width: 768px); .element { @media @min768 { font-size: 1.2rem; } }

在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了，写法更简洁且编译结果一致。

函数（Functions）

Less 内置了大量函数，可以像编程语言一样对颜色、字符串、数值进行变换：

@base: #f04615; @width: 0.5; .class { width: percentage(@width); // 返回 `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); }

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等，具体分类见本文“函数（Functions）”章节的详细清单。

命名空间和访问符

把一组混合放入带名字的规则集中，即形成命名空间，便于按主题组织“组件样式库”：

#bundle() { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white; } } .tab { ... } .citation { ... } }

把.button类混合到#header a中，我们可以这样做：

#header a { color: orange; #bundle.button(); // 还可以书写为 #bundle > .button 形式 }

#bundle()末尾的括号表示该规则集仅作为命名空间使用、不会输出到编译结果中；调用时既可用#bundle.button()，也可写成#bundle > .button。

映射（Maps）

规则集可以充当键值映射，配合[]语法取值，适合定义主题色板等结构化数据：

#colors() { primary: blue; secondary: green; } .button { color: #colors[primary]; border: 1px solid #colors[secondary]; }

输出符合预期(css)：

.button { color: blue; border: 1px solid green; }

与命名空间类似，映射规则集同样以()结尾避免被编译输出，取值语法为#colors[primary]。

作用域（Scope）

Less 的变量遵循就近查找：先在当前作用域查找，找不到再逐级向外层查找：

@var: red; #page { @var: white; #header { color: @var; // white } }

和上面实例代码相同：

@var: red; #page { #header { color: @var; // white } @var: white; }

第二段代码演示了“懒加载（Lazy Loading）”：变量可以先使用、后声明，只要在最终求值前已定义即可，因此#header中的@var解析为#page作用域内的white，而非外层的red。这一机制让变量声明的位置更灵活，但也要注意避免同名变量带来的可读性陷阱。

注释（Comments）

块注释和行注释都可以使用：

/* 一个块注释 * style comment! */ @var: red; // 这一行被注释掉了！ @var: white;

/* ... */块注释会保留到编译产物中，//行注释则会被剥离，适合分别用于“文档说明”与“开发备注”。

导入（Importing）

@import可以把多个 Less 文件合并编译，扩展名.less可省略：

@import "library"; // library.less @import "typo.css";

不带扩展名时按.less解析；显式导入.css文件时按原样输出，不做预编译处理。

Extend

&:extend()让当前选择器“继承”目标规则的全部属性，同时保留自身的专属声明：

nav ul { &:extend(.inline); background: blue; } .inline { color: red; }

编译 css 为：

nav ul { background: blue; } .inline, nav ul { color: red; }

与 Mixin（复制属性）不同，Extend 是“选择器合并”：编译后.inline的规则选择器列表中加入nav ul，两条规则共享同一份声明，可有效压缩产物体积。

逻辑函数 if & boolean

Less 提供条件逻辑能力，boolean()把比较表达式转为布尔值，if()根据条件二选一：

@bg: black; @bg-light: boolean(luma(@bg) > 50%); div { background: @bg; color: if(@bg-light, black, white); }

编译 css 为：

div { background: black; color: white; }

示例中luma(@bg)计算背景亮度，luma(black)不大于 50%，@bg-light为false，因此文字颜色取if()的第三个参数white，实现“深色背景自动配浅色文字”的对比度适配。

字符串函数

| 函数 | 说明 | | :- | :- | |escape| 将 URL 编码应用于输入字符串中的特殊字符 | |e| 字符串转义 | |%| 第一个参数是带有占位符的字符串 |

escape('a=1') // 输出 a%3D1 @mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()" filter: e(@mscode); // 输出 filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less"); // 输出 format-a-d: "repetitions: 3 file: "directory/file.less"";

escape负责百分号编码（=→%3D）；e去掉外层引号原样输出（常用于 filter 这类需要裸语法的属性）；%是格式化函数，%a插入计算后的值、%d原样插入字符串参数。

替换字符串 replace

replace基于正则做字符串替换，支持标志位与捕获组：

replace("Hello, Mars?", "Mars\?", "Earth!"); replace("One + one = 4", "one", "2", "gi"); replace('This is a string.', "(string)\.$", "new $1."); replace(~"bar-1", '1', '2');

预期输出：

"Hello, Earth!"; "2 + 2 = 4"; 'This is a new string.'; bar-2;

第一个例子用\?转义问号，精确替换Mars?；
第二个例子带gi标志（全局 + 忽略大小写），把两处one都替换为2；
第三个例子利用捕获组(string)与$1回引，实现“以 string 开头的结尾替换为新串”；
第四个例子展示与~"..."转义值配合使用。

length

@list: "banana", "tomato", "potato", "peach"; n: length(@list);

预期输出：

n: 4;

返回值列表中的元素数。

extract

@list: apple, pear, coconut, orange; value: extract(@list, 3);

预期输出：

value: coconut;

返回列表中指定位置的值（下标从 1 开始）。

range

value: range(4); // 输出 value: 1 2 3 4; value: range(10px, 30px, 10); // 输出 value: 10px 20px 30px;

生成跨越一系列值的列表：单参数时从 1 生成到该值；三参数时按指定步长（第三个参数）在起止值之间生成列表。

each

each遍历列表或规则集，为每个成员绑定@value、@key和@index变量：

@selectors: blue, green, red; each(@selectors, { .sel-@{value} { a: b; } });

预期输出：

.sel-blue { a: b; } .sel-green { a: b; } .sel-red { a: b; }

每个列表成员的每个规则集都绑定到@value、@key和@index变量。遍历规则集时，键名与序号可以参与拼接：

@set: { one: blue; two: green; three: red; } .set { each(@set, { @{key}-@{index}: @value; }); }

预期输出：

.set { one-1: blue; two-2: green; three-3: red; }

将规则集的评估绑定到列表的每个成员。

each()

each还可以接收混合（Mixin）作为回调，对规则集逐项求值：

set-2() { one: blue; two: green; three: red; } .set-2 { // 调用 mixin 并迭代每个规则 each(.set-2(), .(@v, @k, @i) { @{k}-@{i}: @v; }); }

预期输出：

.set-2 { one-1: blue; two-2: green; three-3: red; }

回调的形参依次对应值、键、索引，适合把“规则集 → 循环生成属性”的逻辑封装成可复用的模板。

使用`range`和`each`创建一个`for`循环

range负责生成序号，each负责迭代，二者组合即可模拟for循环批量生成工具类：

each(range(4), { .col-@{value} { height: (@value * 50px); } });

预期输出：

.col-1 { height: 50px; } .col-2 { height: 100px; } .col-3 { height: 150px; } .col-4 { height: 200px; }

借助插值@{value}与运算@value * 50px，一行循环即可产出整套栅格/间距类名，是 Less 中“函数式生成 CSS”的典型手法。

数学函数

注意：sqrt、abs、pow、mod等函数会保留传入单位参与运算；三角函数以弧度/角度为单位输入（sin(1deg)）；min/max常用于响应式布局中钳制尺寸。

颜色定义函数

argb常用于兼容 IE 滤镜的filter: progid:DXImageTransform.Microsoft.gradient场景；hsl/hsv系函数让颜色可以按“感知维度”调整。

类型函数

类型函数通常与if()或 Mixin 守卫配合使用，在运行时对参数做类型校验，避免不合法的值流入样式声明。

杂项函数

data-uri可把小图标内联进 CSS 以减少请求数；svg-gradient用于生成多色渐变背景图；default与守卫（when）配合实现“兜底分支”。

颜色通道函数

luma/luminance常配合contrast或if()做自动对比度处理（参见“逻辑函数 if & boolean”示例）。

色彩运算函数

色彩运算函数是主题系统的基础：基于一个主色，用lighten/darken派生悬停态与激活态，用fade控制遮罩透明度，用mix调和过渡色。

颜色混合功能

颜色混合函数参照 Photoshop 的图层混合模式，可模拟纹理叠加、高光/阴影、故障风等视觉效果，常用于生成富有层次的渐变与特效背景。

另见

Less.js 官网
CSS 备忘清单
Stylus 备忘清单
Sass 备忘清单：同为 CSS 预处理器，可横向对比语法差异
在线编译预览（lesscss.org 提供）：随时验证本文所有示例的编译输出

本文示例均可在本地复现：安装 Less 后执行lessc input.less output.css，或直接粘贴到在线编译预览中查看即时结果；仓库源码层面的相关资源位于 assets/lessjs.svg 与 README.md 中的 Less.js 条目。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考