less 3.5 的 detached ruleset 是变量赋值能力的延伸，将 css 规则块作为可执行样式值存入变量，需带括号和分号声明，调用时必须加 () 展开，变量求值发生在调用点而非定义点。
Less 3.5 的 detached ruleset 不是“新语法”，而是变量赋值能力的延伸
它本质就是把一整块 CSS 规则当值存进变量里，不立即编译、不绑定选择器、不自动展开——和 @color: #007bff 存颜色没区别，只是存的内容是规则块。你得把它看作「可执行的样式值」，不是「函数」或「宏」。
声明必须带括号和结尾分号：@reset: { margin: 0; padding: 0; }; 缺括号会被当成普通声明；少分号则整个 ruleset 无效，后续调用静默失败。
- 定义时写成
@reset: { margin: 0; padding: 0; }❌（无分号 → 不生效） - 调用时写成
+ @reset❌（+ 和变量间有空格 → 编译报错） - 跨文件使用前必须
@import (reference) "path/to/rulesets.less"，只用@import "..."会导致变量不可见
在 mixin 中安全接收并展开传入的 ruleset
ruleset 作为参数传进 mixin 后，必须显式加 () 才会执行；光写变量名只是引用，不会输出任何 CSS。
例如这个常见错误写法：.card(@styles) { border: 1px solid #ccc; @styles; } —— 它只会原样输出 @styles 字符串，不展开。
- 正确写法：
.card(@styles) { border: 1px solid #ccc; @styles(); } - 调用时必须传 ruleset 实例：
.card({ background: #f0f0f0; padding: 12px; }); - 若支持可选传参，需加守卫：
.card(@styles) when (isruleset(@styles)) { @styles(); }，否则未传时@styles()报ReferenceError
作用域陷阱：变量求值发生在调用点，不是定义点
这是最容易导致样式错乱的地方。ruleset 内部的 @var 不是在定义时取值，而是在被 () 调用那一刻才去当前作用域查。
比如：@text-color: blue; @header: { color: @text-color; }; @text-color: red; .page { @header(); } → 最终生成 color: red;，不是 blue。
- 想复用外部变量？确保它在调用处已声明，而不是只在 ruleset 定义处有
- 依赖多个变量？别硬塞进 ruleset，改用带参 mixin：
.card(@bg, @color) { background: @bg; color: @color; } - 嵌套选择器中用
&是安全的：{ &__title { font-weight: bold; } }会正确绑定调用处的选择器，生成.card__title
别把它当万能胶：性能和维护边界在哪
ruleset 是运行时解析的，每次 () 都要重新计算嵌套、变量、函数，深层嵌套或大量传递会明显拖慢 Less 编译速度。
VS Code 的 Less 插件对 ruleset 语法高亮支持弱，容易漏掉末尾括号或分号，建议每次修改后立刻 lessc 编译验证。
- 单次注入控制在 10 行以内样式；超过就该拆成独立 class 或考虑
:extend() - 不能直接传含
@media的 ruleset，Less 会报错；需封装成.media-sm() { @media (max-width: 768px) { @arguments(); } } - 真正难的不是怎么写，而是判断：这里该用 ruleset 注入、该抽成 BEM 类、还是该用
:extend()—— 没有银弹，得看复用粒度和变更频率
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
