less变量需集中定义在variables.less并首个@import，命名须带前缀、禁裸名，避免嵌套覆盖与硬编码；多主题用map-get()读取命名空间变量，mixins应显式传参而非依赖全局值，非高频值不强塞变量。
直接用 Less 变量抽离颜色、尺寸、断点等公共值，能砍掉 70% 以上的重复搜索替换操作——前提是变量命名统一、作用域清晰、不跨模块硬编码。
变量该定义在哪儿才不会被覆盖或丢失
全局变量必须集中声明在单独的 variables.less 文件里，并在入口 main.less 中第一个 @import；任何组件级 .vue 文件里的 <style lang="less"></style> 块都不要再重复定义同名变量，否则会因作用域优先级导致覆盖失效。
- 错误做法：多个组件各自写
@primary-color: #007bff;，某天改主题色时只改了其中一处 - 正确路径：
@import "@/styles/variables.less";放在所有其他@import之前 - 避免嵌套层级过深：不要在
mixins.less里再@import variables，容易引发循环依赖
怎样让变量适配多主题但又不增加编译负担
用带命名空间的变量组替代单个值，配合 map-get() 或条件判断，而不是为每个主题建一套文件。Less 本身不支持运行时切换，但编译时可生成多套 CSS。
- 定义：
@theme-dark: { bg: #121212; text: #e0e0e0; }; @theme-light: { bg: #ffffff; text: #333333; }; - 使用：
@bg: map-get(@theme-dark, bg); body { background: @bg; } - 注意：
map-get是 Less 3.5+ 才支持，旧项目升级前先查less -v - 别用
@{theme}-bg拼接变量名——插值不能用于变量读取，只能用于选择器或属性名
为什么改了一个变量，有些样式却没变
常见原因是变量被“静态固化”在 mixin 或函数调用中，没有实时响应上游变更。Less 编译是单次求值，不是响应式系统。
- 错例：
.btn() { color: @text-color; } .btn-primary { .btn(); background: @primary-color; }—— 如果@text-color后续被重定义，.btn()不会自动更新 - 对的做法：所有依赖外部变量的 mixin 都应显式接收参数，如
.btn(@text: @text-color) { color: @text; } - 警惕
darken(@primary-color, 8%)这类函数调用：它在编译时就计算完毕，后续改@primary-color不影响已输出的darken结果
如何防止变量名冲突和语义模糊
变量名必须带业务或层级前缀，禁止裸名如 @red、@size；同时禁用拼音缩写和数字编号（如 @c1、@s24），这类命名在三个月后基本没人能准确还原含义。
- 推荐格式：
@color-primary-default、@spacing-unit-sm、@breakpoint-tablet-min - 颜色变量建议按“用途+状态+变体”分层：
@color-button-primary-bg、@color-button-primary-border-hover - 所有变量应在
variables.less顶部加简短注释，例如：// 主品牌色，用于按钮背景、链接文字等高强调区域 - CI 流程中可加校验脚本，grep 出现
@[a-z]{1,2}或@\d+的行并报错
最易被忽略的一点：变量不是万能胶。当某个值只在单个组件内出现 1–2 次、且无复用预期时，硬塞进全局变量反而增加理解成本。Less 的价值在于收敛高频变化点，而不是消灭所有字面量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
