可复用的less基础类需同时满足变量语义化、mixin参数正交、作用域隔离；变量须绑定业务语义而非外观值，mixin须带括号、默认参数及显式作用域，样式应拆分为原子单元并按需组合。
可复用的 Less 基础类不是“写完就能到处用”，关键在于变量语义化、Mixin 参数正交、作用域隔离三者同时成立；否则复制粘贴十次，改一个圆角就得改十处。
基础类变量必须绑定语义，不能绑定外观
比如 @spacing-md 比 @space-16 更可靠，@brand-primary 比 @blue-500 更易维护。外观值（如具体像素、十六进制色）只出现在变量定义层，不出现在 Mixin 调用或组件样式里。
- 颜色类变量优先用业务语义：
@btn-default-bg、@form-label-color，而非@gray-400 - 间距/圆角等数值变量要带单位且可计算：
@radius-sm: 4px，而不是@radius: 4（缺单位会导致calc()或lighten()失效） - 所有基础变量文件必须用
@import (reference)引入，避免重复声明污染作用域
基础类 Mixin 必须带括号 + 默认参数 + 显式作用域
没括号的 .flex-center 不是 Mixin，是普通 class；漏掉括号调用会静默失败或生成空规则。Mixin 内部不能隐式依赖外部变量，否则换个主题就失效。
- 定义和调用都必须带
()：.flex-center() { display: flex; ... }，调用写成.flex-center(); - 每个参数都要有默认值，且默认值来自语义变量：
.button-base(@bg: @btn-default-bg, @radius: @radius-md) - 嵌套中调用必须用
&限定作用域：.card { &:hover { .transition(opacity); } }，否则编译出的是全局:hover - 禁止在 Mixin 里直接写
@primary-color—— 必须显式传参：.button-base(@color)，由调用方决定来源
基础类要拆成原子单元，别堆砌大而全的 Mixin
一个叫 .ui-base() 的 Mixin 听起来很通用，实际等于放弃控制：它被调用 20 次，padding 就重复 20 遍，gzip 也压不下去。Less 编译即展开，没有“运行时引用”。
- 把样式拆成小粒度原子 Mixin：
.pad-y(@y)、.rounded(@r)、.border(@w, @c)，按需组合 - 避免参数耦合：不要写
.card(@config)，而应拆成.card(@radius, @shadow, @padding)，各参数正交可单独覆盖 - 高频使用的原子 Mixin 可配合
@import (once)防止重复引入，但无法解决展开膨胀问题——体积控制靠拆分，不靠导入策略 - 验证是否真复用：编译后 CSS 中同一组声明（如
border-radius: 8px）是否只出现一次？如果多处都有，说明 Mixin 还没拆到位
最常被忽略的，是基础类的“语义粒度”——@btn-padding 和 @form-control-padding 看似相似，但业务含义不同，强行合并会导致某类组件改 padding 时意外影响另一类。复用的前提，是承认差异；不是消灭差异，而是管理差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
