less变量必须显式@import、严格顺序、禁止重复声明，否则样式静默失效；variables.less仅声明带@前缀的语义化变量并以分号结尾，不得含选择器或mixin。
Less变量不能“自动全局生效”，必须显式导入、严格顺序、禁止重复声明——否则编译不报错但样式会静默失效。
variables.less 必须只声明变量，不写任何样式或 mixin
它不是执行文件，而是数据源。所有内容必须是 @xxx: 形式，结尾带分号：
-
@color-brand-primary: #1677ff;✅ 正确 -
@font-size-base: 14px;✅ 单位统一，语义清晰 -
.btn { color: @color-brand-primary; }❌ 禁止！variables.less 里不能出现选择器 -
.center-flex() { ... }❌ 禁止！mixin 应单独放在mixin.less中 -
@spacing-xs: 4px; @spacing-sm: 8px;⚠️ 可行但需克制：变量粒度太细会增加维护负担，优先按设计系统层级抽象（如@space-unit+ 计算）
@import 必须放在每个 .less 文件的最顶部
变量作用域不穿透，导入位置错一位，NameError: variable @xxx is undefined 就立刻报错：
- ✅ 正确顺序：
@import "variables.less";→ 然后才是.header { color: @color-brand-primary; } - ❌ 错误顺序：先写规则再
@import，编译直接失败 - ❌ 错误路径：
@import "../styles/variables"（漏了.less后缀），Webpack less-loader 默认只识别.less扩展名 - ⚠️ 多个
@import同名变量时，后导入者覆盖前导入者，且无警告 —— 主题切换靠的就是这个覆盖逻辑，但必须确保themes/dark.less在variables.less之后导入
变量命名和覆盖要靠 !default + 导入顺序双重控制
!default 不是“默认值保险丝”，而是“首次赋值占位符”，它只在变量尚未被声明时生效：
-
@primary-color: #007bff !default;写在基础库中，项目层再写@primary-color: #28a745;才能覆盖 -
!default必须紧跟在赋值语句末尾，中间不能换行或加注释 -
!default对嵌套块内变量无效，只对顶层变量起作用 - 想让组件级定制不污染全局？别在
button.less里重写@primary-color，改用参数化 mixin：.btn(@bg: @color-brand-primary)
运行时主题切换必须靠 CSS 自定义属性兜底
Less变量编译后就固化为静态值，无法 JS 动态修改。深色模式、用户主题等场景，必须双写：
- 在
variables.less定义：@color-bg-body: #ffffff; - 在根样式中同步导出：
:root { --color-bg-body: @color-bg-body; } - 组件内使用：
background: var(--color-bg-body);（不是@color-bg-body） -
:export块只对 JS 读取变量有用，对 CSS 渲染无效，不能替代:root声明 - Vite 用户注意：
:export需配合插件（如postcss-plugin-variables）或改用 JS 模块导出
最容易被忽略的是：变量不是“写一次就永远安全”。导入顺序、文件路径、命名冲突、编译缓存，任何一个环节松动，都会导致样式在构建后还原成默认值，而浏览器里根本查不到原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
