less ruleset本质是可赋值、可传递、需显式调用的懒加载样式块，区别于自动展开的mixin；它支持when守卫实现编译期条件编译，开关控制样式是否生成，而非运行时隐藏。
Less Ruleset 本质是啥，和普通 mixin 有啥区别
Ruleset 在 Less 里不是函数，而是“可赋值的样式块”，它能被存进变量、传参、条件调用——这点比 mixin 灵活得多。它不自动展开，只有显式调用（比如用括号 () 或 + 合并）才会生效，天然适合做按需加载的“懒加载样式单元”。
常见误区是把它当 mixin 用：写了 @my-ruleset: { color: red; }; @my-ruleset; ——这会报错，因为 Ruleset 变量必须用 () 调用，正确写法是 @my-ruleset();。
用布尔变量开关控制 Ruleset 是否注入
核心思路：把 Ruleset 定义成带条件分支的函数式结构，用 when 守卫 + 变量控制是否产出 CSS。不是“加载/不加载文件”，而是“编译时是否生成对应样式”。
-
@enable-hover-effect: true;—— 全局开关变量，建议放variables.less顶层 - 定义 Ruleset 时用
.hover-style() when (@enable-hover-effect = true) { &:hover { transform: scale(1.02); } } - 在组件中调用：
.button { .hover-style(); }—— 编译后仅当开关为true才生成:hover规则
注意：when 必须写在 Ruleset 名称后、花括号前；若开关为 false，该 Ruleset 完全不会参与编译，CSS 里彻底消失，不是 display:none 那种运行时隐藏。
多个 Ruleset 组合 + 开关嵌套的实操写法
真实项目常需要分层控制，比如「深色模式基础样式」+「动画增强」+「打印适配」三组规则，各自独立开关。这时不能堆 when (@a = true) and (@b = true)，容易失控。
- 每个 Ruleset 单独定义，各自守卫：
.dark-mode() when (@use-dark-mode) { body { background: #1e1e1e; } } - 用一个聚合 Ruleset 统一调度：
.theme-features() { .dark-mode(); .animation-enhance(); .print-styles(); } - 最终在入口处调用：
@use-dark-mode: true; @use-animation: false; .theme-features();
这样改开关只需动顶部变量，不用碰任何样式逻辑。性能上无额外开销——所有守卫都在编译期求值，输出 CSS 和手写一样干净。
Ruleset 按需加载的边界与陷阱
Ruleset 不解决 HTTP 请求级别的“动态加载”，它只影响编译结果。想实现浏览器里切主题时实时生效，仍需 JS 配合 class 切换或 CSS Custom Properties。
- 不能在
@media查询内部直接定义 Ruleset 变量（Less 不支持），得把媒体查询包进 Ruleset 体内：.responsive-grid() { @media (min-width: 768px) { grid-template-columns: repeat(3, 1fr); } }; - Ruleset 内部无法读取父级作用域的局部变量（除非用
@@var显式引用），参数传递要靠调用时传入：.card-shadow(@size) when (@enable-shadow) { box-shadow: 0 0 @size rgba(0,0,0,0.15); } - Webpack / Vite 的 less-loader 默认开启
math: always，但 Ruleset 守卫依赖严格相等判断，确保strictMath: false（否则@x: 1 + 0;这类计算可能让守卫失效）
最易忽略的一点：Ruleset 变量名一旦被 @ 声明，就不可被覆盖——@x: { a: 1 }; @x: { b: 2 }; 第二行会报错。开关变量务必用 . 开头的 Ruleset 名，或纯 @ 变量控制逻辑，别混用命名空间。
