Detach Rulesets 是 Less 中一种未挂载的样式块声明方式，可赋值给变量、作为参数传入 mixin 并通过 .call() 安全展开，保留定义时作用域，支持嵌套与变量捕获，但不可直接用 @ruleset() 调用。
Detach Rulesets 是什么，它真能当“参数”传？
Detach Rulesets 不是函数，也不是高阶语法糖，它只是 Less 里一种特殊的规则集（ruleset）声明方式：用括号包裹、不绑定选择器、不立即输出 CSS。它本质是「未挂载的样式块」，可以赋值给变量、作为参数传给 mixin，也能被 .call() 手动展开。关键点在于：它保留了嵌套上下文和变量作用域，但不会自动编译成 CSS —— 这正是实现「逻辑复用 + 参数化样式块」的基础。
常见误解是把它当 JavaScript 的回调函数用，结果发现变量访问不到、嵌套失效。根本原因：Detach Rulesets 在定义时就捕获了当前作用域，传入 mixin 后，.call() 执行时仍沿用原始作用域，而非调用处作用域。
怎么把样式块当参数传给 mixin 并安全展开？
必须显式调用 .call()，且注意作用域链。最可靠写法是让 mixin 接收 ruleset 变量，并在内部用 @arguments.call() 或直接 @ruleset.call() 展开：
.with-border(@ruleset) {
border: 1px solid #ccc;
@ruleset.call(); // ✅ 正确：在 mixin 作用域内执行
}
.my-box {
.with-border({
color: red;
font-weight: bold;
});
}
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
-
@ruleset()写法会报错 —— Detach Rulesets 不是 mixin，不能像函数那样直接加括号调用 - 如果 ruleset 里引用了外部变量（比如
@theme-color），而该变量只在调用处定义，.call()仍会去 ruleset 定义处找，找不到就报Variable is undefined - 嵌套选择器（如
&:hover）在.call()中依然有效，但需确保父选择器已存在；若在 detached ruleset 里写&.active，而调用时父选择器不匹配，则生成无效 CSS
如何让传入的 ruleset “感知”调用时的上下文变量？
做不到自动感知。Less 没有动态作用域。唯一可控的方式是：把需要的变量显式作为参数再传一次。例如：
.styled-container(@ruleset, @bg: #fff) {
background: @bg;
@ruleset.call(@bg); // 把 @bg 当参数传进去
}
// 调用时：
.card {
.styled-container({
&__title { color: @bg; } // 这里能用 @bg，因为 .call() 传了
}, #f0f0f0);
}
这种模式适合封装「带主题色的组件样式逻辑」，但要注意：ruleset 内部必须声明形参（如 (@bg)），否则 .call(@bg) 会被忽略。
另一个替代思路是改用 mixin + @rest 参数模拟，但那就不是 detach ruleset 了 —— 它更灵活，但失去了「纯样式块」的语义清晰性。
Detach Rulesets 的实际适用边界在哪？
它适合做「样式策略封装」，比如统一处理响应式断点、状态组合（hover + disabled）、或 BEM 元素变体生成，但不适合替代完整组件抽象。性能上无额外开销，编译期就展开了；兼容性上所有 Less 3.5+ 都支持，但旧版（如 2.x）不识别 .call()。
真正容易被忽略的是：Detach Rulesets 一旦赋值给变量，就固化了定义时的所有引用，包括 @import 的内容、父级 & 关系、甚至注释位置。调试时看到生成的 CSS 和预期不符，八成是 ruleset 定义位置太靠上/靠下，导致变量捕获错了层级。
