因为变量集中收口、嵌套可控、mixin可复用，大型项目样式重构可依赖编译期校验而非人肉grep；变量须统一定义于base/variables.less并仅@import一次，禁重定义；@import必须用(reference)防重复，嵌套限三层且修饰符用&显式拼接；mixin应封装行为而非值，避免硬编码。
因为变量集中收口、嵌套可控、Mixin可复用——这三件事让改一处样式不靠人肉 grep，而靠编译期校验和结构化替换。
变量必须统一定义在 base/variables.less，否则重构会静默失效
原生 CSS 的 :root 变量靠 var(--color) 运行时计算，漏写或拼错只报 warning，样式直接回退到默认值；Less 的 @primary-color 是编译期文本替换，一旦 @import "base/variables.less" 漏掉、顺序错（比如先 @import "components/button.less" 再 @import "base/variables.less"），@primary-color 就彻底消失，浏览器里只剩灰扑扑的默认色——没报错，查不到源头。
实操建议：
• 所有变量定义只允许出现在 base/variables.less，禁止在组件文件里重定义同名变量（如 @primary-color: #ff0000;）
• CI 流程加校验：grep -r "@primary-color" src/ | grep -v "base/variables.less"，有输出就拒绝合并
• 颜色语义化命名：用 @primary-color-dark 替代 @color-2，避免后期改主题时连带崩掉边框和禁用态
@import (reference) 是模块化重构的底线，不是可选项
Less 默认的 @import 是纯文本拼接，不是模块加载。如果 5 个组件都 @import "mixins/reset.less"，最终 CSS 里就会出现 5 份 * { box-sizing: border-box; }，体积暴涨、优先级混乱、调试时 DevTools 里一堆重复规则。
实操建议：
• 公共依赖（variables.less、mixins.less）只在根文件 index.less 中用 @import (reference) 引入，子模块禁止再 @import 同一文件
• 第三方 CSS（如 antd.css）用 @import (inline) 原样保留，避免 Less 解析器误处理括号或 ! 语法
• 禁用 @import (multiple)，它会让同一文件被插入多次，某些编译器静默覆盖变量，有些直接报错
嵌套限制三层 + & 显式拼接，是避免选择器失控的关键
Less 允许无限嵌套，但编译后生成的是空格分隔的后代选择器，比如 .page .header .nav .item。这种四层选择器在 Chrome DevTools 里展开困难，且极易被 .btn:hover 这类高权重规则意外覆盖——重构时你改了 .item 颜色，结果发现按钮 hover 态也变了。
实操建议：
• 嵌套最多三层，对应 HTML 容器 → 区块 → 元素的合理层级
• 修饰符必须用 & 显式拼接：.btn { &--large { font-size: 20px; } }，而不是 .btn { .btn--large { ... } }
• 禁止在伪类里再嵌套元素：.btn:hover { .btn__icon { ... } } 会生成冗余选择器 .btn:hover .btn__icon，应直接写 .btn--hover .btn__icon
用 .mixin() 封装行为而非值，才能真正解耦重构逻辑
很多人把所有间距、颜色全塞进 variables.less，结果换主题时按钮边框色没变——因为 @border-color 被硬编码在 button.less 里了。Mixin 的价值在于封装“行为”，比如圆角+阴影+过渡这一整套视觉逻辑，而不是只存一个数字。
实操建议：
• 组件专属样式用 Mixin 封装：.button-style(@size: md) { ... }，替换时只调参，不碰选择器
• Mixin 内部避免硬编码路径：@import "base/mixins" 改成相对路径 @import "../base/mixins"，配合构建工具解析，迁移时不卡死
• 不在 Mixin 里写条件分支：.border-radius() 是文本替换，没法像 SCSS 那样做 @if 判断，别指望它自动适配断点
真正卡住重构进度的，从来不是“怎么写 Less”，而是“谁动了 @import 顺序”“哪个组件偷偷重定义了 @spacing-lg”“@import (reference) 漏加导致 reset 规则重复输出五遍”——这些事 Less 编译器不会拦，得靠约定、工具和代码审查兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
