企业官网建设流程全解析

Less.js混合器完全教程：Mixin参数、Guards与嵌套选择器实战

【免费下载链接】less.jsLess. The dynamic stylesheet language.项目地址: https://gitcode.com/gh_mirrors/le/less.js

Less.js 是动态样式表语言（The dynamic stylesheet language），其中的**混合器（Mixin）**是最核心的能力之一：通过 Mixin 参数、Guards 条件匹配和嵌套选择器，你可以像调用函数一样复用样式，让 Less.js 混合器成为消灭重复 CSS 的终极武器。本教程面向新手，带你从零理解 Less.js Mixin 的三大实战技巧。

什么是 Less Mixin？

Mixin（混合器）是一段可被"调用"的样式规则。定义一个以()结尾的选择器即为 Mixin，通过选择器名();语句调用，样式就会注入到调用处，而 Mixin 本身不会输出到最终 CSS 中。

.box { border: 1px solid #ccc; padding: 10px; } .alert { .box(); /* 调用 .box 混合器 */ color: red; }

调用后会生成带border和padding的.alert规则，而.box本身因为被定义成 Mixin，不会出现在输出中。这就是 Less.js 混合器最基础的用法。

Mixin 的语法由 AST 中的两个节点配合完成：定义对应 mixin-definition.js，调用对应 mixin-call.js。

Mixin 参数与默认值：快速定制样式

Mixin 支持带默认值的参数，例如@a: 1px表示可选参数，调用时可省略：

.mixin(@a: 1px, @b: 50%) { width: (@a * 5); height: (@b - 1%); } .one-arg { .mixin(3px); /* @b 使用默认值 50% */ }

• 按位置传参：@color: black这类参数名可任意顺序省略；
• 可选参数判定：在 mixin-definition.js 中，源码通过optionalParameters与required计数来区分必选/可选参数，调用时参数数量不足会报mixin-not-defined错误；
• 可变参数（...）：用于接收任意数量的参数，适合做边框、阴影等多值场景。

更多参数写法可参考官方测试样例 mixins-args.less，其中演示了默认值、命名参数和变量传参的完整用法。

Guards 条件混合器：让 Mixin 自动匹配

Guards（守卫）使用when关键字给 Mixin 附加条件，Less 会在所有同名 Mixin 中只执行条件成立的那个，从而实现"一套命名、多种行为"：

.light when (lightness(@a) > 50%) { color: green; } .dark when (lightness(@a) < 50%) { color: orange; }

三个实用技巧：

1. 多个条件：用逗号分隔，全部满足才匹配（when (@b = 1), (@c = 2)）；
2. default() 兜底：条件都未命中时回退到when (default())的 Mixin，类似函数的默认分支；
3. 作用域隔离：Guards 在 Mixin 定义处求值，外层变量变更会影响匹配结果——详见 css-guards.less 中.see-the与.hide-the的对照示例，预期输出在 css-guards.css。

条件表达式由 condition.js 实现，支持比较运算、变量引用与内置颜色函数（如lightness()）。

嵌套选择器：用 Mixin 构建组件级样式

Mixin 体内可以嵌套选择器，&代表父选择器。这是组织组件样式的关键模式：

.nested-ruleset(@width: 200px) { width: @width; .column { margin: @width; } /* 嵌套选择器 */ &:hover { color: pink; } /* 父选择器 & */ } .content { .nested-ruleset(600px); }

调用后.content会展开出width: 600px，并生成.content .column这类组合选择器。Guards 同样可以作用于&：& when (@c = 3) { ... }表示"当条件成立时扩展父选择器"，多个& when块会被合并到同一选择器下（见 css-guards.less 的.dont-split-me-up用例，输出为 css-guards.css 中的单条合并规则）。

Mixin 常见错误速查 🛠️

仓库内置的错误测试用例 mixin-not-defined.txt 与 mixin-not-matched.txt 记录了真实报错文案，遇到异常时可对照排查。

小结：Less.js Mixin 学习路径

1. 先掌握参数——默认值 + 可变参数覆盖 80% 的复用需求；
2. 再学 Guards——用when与default()做条件分发，实现响应式断点匹配；
3. 最后组合嵌套——Mixin 体内嵌套选择器 +&父引用，构建完整的组件级样式模块。

核心源码位于 tree/mixin-definition.js 与 tree/mixin-call.js，配套完整测试数据见 tests-config/ 目录。Less.js 是"动态样式表语言"，把 Mixin、Guards、嵌套选择器三者组合起来，你就能写出高度可维护的 Less 样式库。

【免费下载链接】less.jsLess. The dynamic stylesheet language.项目地址: https://gitcode.com/gh_mirrors/le/less.js