detached rulesets 是 less 编译期样式函数，仅在构建时条件注入静态 css，不支持运行时动态加载；其“按需”指根据变量或 when 条件在编译阶段决定是否输出样式，而非 js 控制的懒加载。
Less 本身不支持运行时“动态加载 CSS 属性”，detached rulesets 也不是用来做浏览器端懒加载的——它完全在编译期起作用，生成的是静态 CSS 输出。想用它实现「按需动态加载」，必须明确：这是编译时的条件注入，不是 JS 控制的 runtime 加载。
detached rulesets 本质是编译期样式函数，不是 runtime 模块
detached rulesets 是 Less 编译器内部的一种值类型，类似闭包：定义时不执行、不输出 CSS，只等被 () 调用或 + 注入时才展开。它没有网络请求、不触发 DOM 插入、不依赖 JS 执行时机。
- 所有逻辑都在
less-loader或less.render()阶段完成，最终产物仍是纯 CSS 字符串 - 所谓“按需”，指的是根据变量值、
when条件或 Mixin 参数，在编译时决定是否把某段样式写进输出文件 - 如果你期望点击按钮后才拉取并应用某组样式，
detached rulesets做不到；该用 JS 动态loadCss()或切换 CSS 自定义属性
如何用 detached rulesets 实现编译时“按需注入”
典型场景：组件库提供插槽式样式钩子，业务方通过覆盖变量控制是否启用某套视觉逻辑（比如仅在 @theme = 'pro' 时注入阴影和圆角）。
- 定义带条件的规则集：
@card-shadow: when (@theme = pro) { box-shadow: 0 2px 12px rgba(0,0,0,.1); border-radius: 8px; }; - 在组件中安全调用：
.card { +@card-shadow; }→ 编译后，只有@theme为pro时才生成对应 CSS - 避免无条件展开：不要写
@card-shadow();，否则即使条件不满足也会报错或产出空规则 - 跨文件使用必须
@import (reference)，否则变量不可见，@card-shadow会被忽略
常见错误：以为能 runtime 动态加载
现象包括：改了 JS 变量但样式没变、控制台无报错但目标元素无效果、热更新后样式丢失。
- 误写
@import "theme-rules.less";→ 规则集未被(reference)导入，变量不可访问 - 在 JS 中尝试
less.modifyVars({ '@theme': 'pro' })后期望重编译生效 → 它只影响后续调用，无法刷新已渲染的 detached ruleset 输出 - 把
@hover-style: { &:hover { color: red; } };直接放在.btn { @hover-style(); }→ 编译失败，因为&:hover在顶层 ruleset 中无父选择器上下文；应改用+注入或确保在选择器内定义 - 混淆
+和()：前者是“注入到当前选择器”，后者是“立即执行该规则集”，语义不同，不能互换
真正需要 runtime 动态加载 CSS 属性，得靠 JS 控制 <link> 标签或 document.styleSheets；detached rulesets 的价值在于编译期精简输出、解耦样式逻辑、支持主题条件分支——它的“动态”，始终发生在构建那一刻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
