ruleset在less 3.x中是可赋值、可传递、需显式调用（如@ruleset();）的懒加载样式块，不自动输出css；它非函数、无参数与守卫能力，本质是未求值的样式容器，展开位置决定其选择器上下文。
Ruleset在Less 3.x中不是CSS结构生成器
Less 3.x的Ruleset（即用括号包裹的样式块，如{ color: red; }）本身不直接“创建CSS结构”，它只是一个可赋值、可传递、可嵌套的样式容器，必须通过变量引用或.call()方式展开才能输出CSS。直接写@my-ruleset: { color: red; };不会生成任何CSS——这是新手最常踩的坑。
- Ruleset本质是“未求值的样式片段”，类似函数体但无参数绑定
- 它只在被
@my-ruleset();调用（带括号）时才展开为真实规则 - 不能直接用
@my-ruleset;（不带括号）引用，否则编译报错Operation on an invalid type - 嵌套时需注意作用域：Ruleset内部无法直接访问外层变量，除非显式传入
正确展开Ruleset的两种写法
要让Ruleset产出CSS，必须触发其执行。Less 3.x支持两种等效语法：
-
括号调用法：
@my-ruleset();—— 最常用，语义清晰 -
.call()方法：
@my-ruleset.call();—— 兼容性更好，尤其在动态拼接场景下更稳定
示例：
@primary-style: {
font-weight: bold;
line-height: 1.5;
};
.primary-text {
@primary-style();
}
编译后得到：
.primary-text {
font-weight: bold;
line-height: 1.5;
}
Ruleset与Mixin的关键区别
Ruleset常被误认为是“无参Mixin”，但它没有Mixin的参数能力、守卫（guards）和模式匹配，也不支持@arguments。它的核心价值在于“延迟求值 + 可组合性”：
- Mixin定义即执行（只要被调用），Ruleset定义只是存储，直到
()触发 - Ruleset可作为变量值参与运算，比如拼接：
@all-styles: @reset + @layout + @theme;（需Less 3.8+） - Ruleset不能用
.when()做条件分支，要用if()函数或拆成多个变量控制 - 性能上无差异，但Ruleset在大型主题系统中更易做运行时样式合并
容易忽略的作用域和继承问题
Ruleset内部不自动继承父选择器，也不感知调用位置的嵌套上下文。比如：
.card {
@hover-effect: { &:hover { transform: scale(1.02); } };
@hover-effect(); // ✅ 正确：生成 .card:hover
}
但如果写成：
.card {
@hover-effect: { &:hover { transform: scale(1.02); } };
}
@hover-effect(); // ❌ 错误：生成全局 :hover，脱离.card上下文
根本原因：Ruleset保存的是相对路径片段，展开位置决定其解析上下文。这不像Mixin那样绑定定义处作用域。
复杂点在于，当Ruleset含嵌套选择器且被跨层级调用时，很容易产出意料之外的CSS结构——务必在调用点确认当前选择器上下文是否符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
