Detached Ruleset 必须用括号 @ruleset(); 显式调用才能展开为 CSS，定义时需大括号包裹合法样式块（支持嵌套、媒体查询、&、变量），作用域绑定定义处，跨文件需 @import (reference)，误写空格或漏括号将导致失效。
Detached Ruleset 本身就能传递任意复杂度的 CSS 属性块，但必须用括号 () 显式调用，否则它只是个“待执行的样式函数值”，不会产出任何 CSS。
怎么写一个能接收并展开复杂样式的 Detached Ruleset
关键不是“多复杂”，而是“结构是否合法”：只要语法符合 Less 规则（比如嵌套、媒体查询、变量引用、& 拼接），它就能存、能传、能展开。
- 定义时用大括号包裹完整规则块：
@complex-style: { background: linear-gradient(to right, @primary, @secondary); padding: @spacing-lg; &:hover { transform: scale(1.02); } }; - 调用时必须加括号：
.card { @complex-style(); }→ 编译后生成实际 CSS；写成@complex-style;或@complex-style;都无效 - 支持嵌套选择器：
{ .header { color: @text-dark; } .footer { margin-top: @spacing-md; } }会被原样注入到当前选择器下
为什么传了却没生效？常见失效场景
现象是编译无报错，但目标元素没对应样式——大概率是作用域或调用方式错了。
- 变量未
@import (reference)：规则集定义在base/rulesets.less，但业务文件只写@import "base/rulesets";→ 变量不可见，调用被忽略 - 作用域绑定在定义处：如果
@complex-style里用了@color，而这个@color是在 ruleset 外部定义的，它能访问；但如果是在调用点内部声明（比如.card { @color: red; @complex-style(); }），@complex-style看不到它 - 误用空格：
+ @complex-style❌（+ 和变量间不能有空格）；正确是+@complex-style或@complex-style(); - 媒体查询冒泡失效：传入带
@media的 ruleset 时，若外层没有匹配的媒体上下文（比如没写@media (min-width: 768px) { @complex-style(); }），它可能被丢弃
如何安全地传参给 Detached Ruleset
Detached Ruleset 本身不支持形参，但可以通过“把参数传给它的调用者”来间接实现。
- 封装一层 mixin：
.with-bg(@bg) { background: @bg; padding: 12px; }，再把它赋值为 ruleset：@card-body: {.with-bg(#f0f0f0);}; - 或者让 ruleset 接收一个函数式参数：
@card-body: (@bg) { background: @bg; padding: 12px; };，调用时写@card-body(#fff); - 注意：传入的值必须是编译期可确定的，不能是 JS 运行时变量；所有计算都在 less-loader 或
less.render()阶段完成
性能和维护上最该警惕的一点
Detached Ruleset 不是语法糖，它是编译器运行时解析的闭包式结构。一个 ruleset 里嵌套 5 层 & + 媒体查询 + 条件守卫，会让编译速度明显下降，尤其在 watch 模式下热重载变慢。真正难的不是写出来，而是判断——这段逻辑到底该用 ruleset 注入，还是拆成独立 class，或者改用 :extend() 复用。没想清楚这点，后面调试和协作成本会指数级上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
