Detached Rulesets是带括号声明并需加()调用执行的可复用样式块，能访问调用点作用域，变量求值在调用时发生，&绑定调用处选择器，isruleset()用于安全判断。
Less里怎么用Detached Rulesets传样式块给mixin
Detached Rulesets本质是把一坨CSS规则存成变量，再当参数传进mixin里执行——不是“复制粘贴”，而是“运行时注入”。它解决的是“同一组样式要在多个mixin里复用，又不想写死或重复定义”的问题。
常见错误是把它当普通变量用：比如@my-styles: { color: red; }，然后直接.mixin(@my-styles)，结果报错或无效。原因在于Less要求Detached Rulesets必须带括号声明，且调用时要用()执行。
-
@my-styles: { color: red; font-weight: bold; };—— ✅ 正确声明（结尾分号不能少） -
.btn(@styles) { @styles(); }—— ✅ 调用时加()，触发执行 -
.btn(@my-styles);—— ✅ 传入后会渲染出color: red; font-weight: bold; - 漏掉
()，比如@styles直接写在选择器里，会被当成普通属性名，编译失败
Detached Rulesets和普通变量、嵌套规则的区别在哪
它既不是字符串也不是CSS片段文本，而是一个可执行的样式上下文。这意味着它能访问调用点的作用域，比如变量、函数、甚至父选择器。
典型陷阱是误以为它“继承”了定义处的变量。其实它只捕获定义时的**语法结构**，变量求值发生在调用时。所以@color: blue; @r: { color: @color; }; @color: red; .use() { @r(); }最终生成的是color: red;，不是blue。
- 和普通变量比：
@var: 10px只能存值；@rules: { margin: @var; }能存带计算、嵌套、甚至&引用的选择器逻辑 - 和
&嵌套比：Detached Rulesets可以跨mixin传递，&只能在当前作用域内生效 - 兼容性：Less 2.0+ 支持，旧版本会直接报
ParseError: expected `}`
在带参数的mixin里怎么安全接收并展开Detached Rulesets
接收方mixin必须显式调用()，否则规则不会展开。如果想支持“可选传入”，得加守卫判断，不然没传时@styles()会报ReferenceError。
.card(@padding: 12px, @styles: {}) {
padding: @padding;
@styles();
}
上面写法有风险：当@styles为空对象{}时，@styles()仍会尝试执行，但空规则集不报错；可读性差，也不利于调试。
- 更稳妥写法：
.card(@padding: 12px, @styles: false) when (isruleset(@styles)) { @styles(); } -
isruleset()是Less内置类型判断函数，避免把0、""等误判为规则集 - 别用
default()或isdefined()判断，它们对Detached Rulesets不可靠 - 如果规则集里用了
&，它绑定的是调用该mixin的选择器，不是定义处的——这点容易被忽略
为什么有时候Detached Rulesets展开后选择器层级乱了
因为&在Detached Rulesets里是“延迟解析”的：它不绑定定义位置，而是在调用点根据当前选择器上下文拼接。比如在.btn { @r(); }里调用@r: { &__icon { display: inline-block; } };，实际生成的是.btn__icon，不是.some-other .btn__icon。
这个行为常被当成bug，其实是设计使然。但如果你希望它始终挂载到某个固定父级（比如.ui），就不能依赖&，得显式写全路径或用变量拼接。
- 错误预期：
@r: { &__label { color: #333; } }; .form-input { @r(); }→ 想生成.form-input__label（✅）；但在.modal .form-input里调用，却得到.modal .form-input__label（⚠️） - 可控做法：
@ns: ~".form"; @r: { @{ns}__label { color: #333; } };，这样无论在哪调用，都固定输出.form__label - 性能影响极小，但过度嵌套Detached Rulesets（比如多层传参+执行）会让编译变慢，调试也难定位来源
事情说清了就结束。Detached Rulesets真正难的不是语法，而是理解它“定义时不求值、调用时才绑定上下文”这个特性——很多问题都源于下意识按JS闭包去类比。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
