分离规则集是less中不绑定选择器、不自动展开的可复用样式块，本质是“可执行的样式函数值”；它可赋值变量、传参、条件调用、作用域隔离，而mixin仅支持调用即展开。
Less 的 detached rulesets（分离规则集）不是“高级技巧”，而是解决「样式逻辑复用但不立即输出」的核心机制——它让你把一组 CSS 规则当变量存起来，按需注入、组合、传参，甚至嵌套调用。没用对它，.mixin() 和 @import (reference) 就容易变成硬编码搬运工。
什么是分离规则集？和 mixin 有什么本质区别
分离规则集是带括号的规则块，但不绑定选择器，也不自动展开，它更像一个“可执行的样式函数值”：
-
.btn-base是 mixin：调用即展开，生成实际 CSS；而@btn-base: { color: @primary; border: 1px solid desaturate(@primary, 20%); };是分离规则集：它本身不产出任何 CSS，只等待被+或()调用 - 分离规则集可赋值给变量、作为参数传入其他规则集、在
when条件里分支判断，mixin 不支持这些动态行为 - 它天然隔离作用域：内部用的
@color不会污染外部，也不受外部同名变量干扰——这点比 mixin 更干净
怎么用分离规则集实现“插槽式”样式注入
所谓“插槽”，是指组件模板预留样式入口（比如 .card-header），你不想写死样式，而是让使用者决定填什么视觉逻辑。分离规则集就是那个“可插拔的样式模块”：
- 定义插槽变量：
@card-header-style: { background: @surface; padding: @spacing-md 0; }; - 在组件中用
+注入：.card-header { +@card-header-style; }→ 编译为.card-header { background: #f8f9fa; padding: 16px 0; } - 下游项目可覆盖：
@card-header-style: { background: linear-gradient(to right, @primary, @secondary); };，无需改组件源码 - 支持条件切换：
.card when (@variant = compact) { +@card-header-style; }，避免无用规则进入输出
常见错误：分离规则集调用失败或样式丢失
现象包括：编译无报错但目标元素没样式、+ 后面的规则完全不生效、嵌套调用时报 Recursive call to ruleset：
- 忘记加括号定义：
@reset: { margin: 0; padding: 0; }✅；@reset: { margin: 0; padding: 0; }❌（少分号）；@reset: { margin: 0; padding: 0; }❌（没括号，会被当成普通声明） - 误用空格：
+ @card-header-style❌（+和变量间不能有空格）；必须写成+@card-header-style - 跨文件未
@import (reference)：分离规则集定义在base/rulesets.less，但业务文件只写@import "base/rulesets";→ 规则集不可见，调用失效 - 在 media query 内部直接定义分离规则集再调用，某些 less-loader 版本会丢弃其内容；稳妥做法是定义在顶层，仅在 media 中调用
和 @import (reference) + mixin 比，什么时候该选分离规则集
关键看你要不要“把样式当数据来操作”：
- 需要运行时合并多个规则集：
@style: {@a; @b;}; .el { +@style; }→ 只有分离规则集支持这种拼接 - 要传给 JavaScript（通过
less.modifyVars动态注入主题）：分离规则集能被 JSON 序列化，mixin 不能 - 封装“样式策略”而非“样式片段”：比如
@focus-outline: { outline: 2px solid @focus-color; outline-offset: 2px; };是一种策略，可全局开关，而不是某个按钮的固定边框 - mixins 适合“一次调用、固定输出”，分离规则集适合“多次组合、按需求值”——后者更容易被构建工具 tree-shake，也更贴近现代 CSS-in-JS 的思维
真正难的不是语法，而是判断哪些样式逻辑值得抽象成“可携带上下文的规则块”。比如 @button-variant 如果只控制颜色，用变量就够了；但如果还要联动阴影、过渡、禁用态透明度，那就该是分离规则集，而不是塞进七八个 mixin 参数里硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
