变量集中管理、嵌套结构可控、混合可复用是10+人协作时样式当日上线的关键；变量须统一收口至base/variables.less且仅@import一次，禁重定义；.mixin()仅支持文本替换，不支持条件逻辑；@import无作用域，须由根文件统一引入，子模块禁止重复@import。
因为变量集中管理、嵌套结构可控、混合可复用——这三件事在 10+ 人协作时，直接决定样式改动能不能当天上线，而不是卡在“谁动了按钮颜色”这种排查上。
变量必须统一收口到 variables.less，否则颜色会漂移
原生 CSS 的 :root 变量靠 var(--color) 调用，但运行时计算、无编译检查；Less 的 @primary-color 是编译期替换，一旦漏 @import "variables.less" 或顺序错（比如先 @import "button.less" 再 @import "variables.less"），@primary-color 就静默失效，浏览器里只看到默认色——查不到报错，只能肉眼比对。
- 所有变量定义必须放在
base/variables.less，且只允许被@import一次 - 业务模块禁止重定义同名变量，如
@primary-color: #ff0000;必须删掉，改用@primary-color-dark这类语义化变体 - CI 流程里加一条校验：
grep -r "@primary-color" src/ | grep -v "base/variables.less"，有结果就拒绝合并
.mixin() 能复用带逻辑的样式块，但不支持条件分支
Less 的 .border-radius(@r) 是文本替换，调用时填多少就输出多少；它没法像 SCSS 的 @mixin 那样写 @if $size == 'large'。所以别指望它自动适配主题或断点。
- 适合封装纯样式组合：圆角、阴影、clearfix、flex 布局基类
- 避免传太多参数，
.btn(@bg, @color, @hover-bg, @hover-color, @border)这种写法等于把变量又散出去了，不如拆成.btn-base+.btn-theme - 需要条件逻辑时，宁可多建两个 mixin：
.btn-primary和.btn-secondary，也别塞进一个带判断的 mixin 里
@import 是拼接不是模块化，冲突全靠人工盯
@import "mixins.less" 在 Less 里就是把文件内容原样贴过来，没作用域、不 dedupe。A 组件和 B 组件都 @import 同一个 reset.less，最终 CSS 里就出现两份 *, *::before, *::after { box-sizing: border-box; }。
- 根文件
index.less统一@import公共依赖，子模块禁止再@import公共文件 - 路径命名强制分层：
base/放重置和变量，components/下每个组件只@import自己需要的局部 mixin，不碰 base - 禁用
@import (multiple)，它会让同一文件被插入多次，变量重复赋值时某些编译器会报错，有些则静默覆盖
真正拖慢效率的从来不是写代码的速度，而是改一处样式后，得花半小时确认有没有漏掉某个 @import、某个嵌套层级超限、某个变量被局部覆盖——这些事 Less 不会帮你拦，得靠约定和工具兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
