颜色和间距变量必须在variables.less顶层集中声明、语义命名、统一单位，禁止嵌套或重复生成，深色模式需用CSS变量桥接，间距须带单位并用mixin批量生成。
颜色和间距变量必须集中声明、语义命名、统一单位，否则后期改一个值，全项目漏改是常态。
变量必须在 variables.less 顶层集中声明
所有颜色和间距变量只能出现在 variables.less 文件最顶部，不能嵌套在选择器、mixin 或条件块里。Less 没有“全局作用域”，只有“导入顺序决定可见性”。
-
@color-primary: #1677ff;✅ 正确：顶层、带@、分号结尾 -
primary-color: #1677ff;❌ 编译失败：漏@，被当无效 CSS 属性丢弃 -
.btn { @color-primary: #ff6b6b; }❌ 不可复用：作用域锁死在.btn内部，其他文件读不到 - 组件文件中
@import必须写在第一行，且顺序不能错：@import "variables.less";→@import "mixins.less";→ 样式规则
颜色变量要语义化，别用“blue-500”这类设计系统术语
前端不是 UI 设计稿的搬运工。变量名要表达用途，而不是视觉特征。比如 @color-brand-primary 比 @color-blue-500 更可靠——换主题时你改的是“品牌主色”，不是“蓝色第五档”。
- 推荐命名：
@color-brand-primary、@color-text-secondary、@color-border-divider - 避免命名：
@blue（太泛）、@mainBlue（不具扩展性）、@color-1（完全不可维护） - 深色模式兼容：直接把变量值设为 CSS 变量桥接，如
@color-brand-primary: var(--primary-color, #1677ff);，后续 JS 控制document.documentElement.style.setProperty('--primary-color', ...) - 别在变量里调用
lighten()等函数：编译期静态值无法响应运行时主题切换，lighten(@color-brand-primary, 10%)会因@color-brand-primary是var(--x)而报错
间距变量必须带单位，且用函数批量生成
手写 @spacing-xs: 4px; @spacing-sm: 8px; 看似简单，但步长一变就得全局搜替换；更糟的是，纯数字（如 @spacing-2: 8）参与 calc() 会直接让整条声明失效。
立即学习“前端免费学习笔记（深入）”；
- 基础步长统一设为
@spacing-base: 4px;，再用.make-spacing(@base: 4px, @max: 8)mixin 循环生成@spacing-1到@spacing-8 -
get-spacing(2)必须返回8px，不能返回8—— 否则margin: calc(get-spacing(2) + 2px)编译成calc(8 + 2px)，浏览器无视 - 推荐拼单位方式：
unit(@base * @n, px)比@base * @n + 'px'更安全，避免0px在老浏览器中解析异常 - margin 和 padding 共用同一套
@spacing-x变量，但使用意图要清晰：组件内部用padding控制自身呼吸感，用margin控制与其他元素距离
别在多个文件里重复调用 .make-spacing()
每个间距层级只应在 variables.less 中调用一次 .make-spacing()。如果 card.less 和 button.less 都各自调一遍，编译输出的 CSS 里会出现重复的变量定义，体积膨胀且可能覆盖出错。
- 只在
variables.less顶部调用：.make-spacing(4px, 8); - 所有组件文件只
@import "variables.less"，不 import 任何含变量生成逻辑的 mixin 文件 - Less 3.5+ 才支持 map 和
extract()，旧版本要用数组模拟，否则get-spacing(3)返回undefined operation - 断点变量也要走同样路径：
@breakpoint-tablet: 768px;，后续全部用@media (max-width: @breakpoint-tablet)，别硬编码像素值
最容易被忽略的点：变量不是写完就完事的。它们必须被所有样式文件真正“消费”——如果某个组件没显式 @import "variables.less"，或者用了 scoped style 却没配 style-resources-loader，那变量就只是躺在文件里的一堆文本。
