Less变量不能直接覆盖已存在的CSS规则，它仅在编译期将@primary-color等占位符替换为具体值，生成静态CSS；真正重写全局样式需统一用变量驱动所有相关选择器，并确保无硬编码覆盖、导入顺序正确且仅一处定义。
Less变量不能直接覆盖已存在的CSS规则
Less变量只是编译时的占位符，不是运行时的样式开关。你写 @primary-color: #007bff，它只在编译阶段替换成对应值，不会动态修改浏览器里已经生效的 .btn 或 body 样式。想“重写全局样式”，本质是用变量控制整套样式输出，而不是事后劫持CSS。
用变量统一控制选择器和属性值
真正可行的做法是：把所有需要全局调整的样式（颜色、间距、圆角、字体等）都通过变量驱动，并集中定义基础类或组件类。例如：
@spacing-xs: 4px;
@spacing-sm: 8px;
@spacing-md: 16px;
@border-radius: 4px;
.btn {
padding: @spacing-sm @spacing-md;
border-radius: @border-radius;
}
.card {
margin-bottom: @spacing-md;
border-radius: @border-radius;
}
这样改一个 @border-radius，所有用到它的组件就自动更新 —— 但前提是这些组件的样式确实引用了该变量，且没有硬编码值覆盖。
避免在多个文件里重复声明同名变量
Less不支持变量重定义（第二次声明会报错），也不支持跨文件“覆盖”变量。常见错误包括：
- 在
variables.less里定义@text-color，又在theme-dark.less里再写一遍@text-color: #fff→ 编译失败 - 用
@import导入顺序错乱，导致变量未定义就被使用
正确做法是：
- 只在一个入口文件（如
index.less）顶部@import "variables.less" - 主题切换靠多套变量文件 + 条件编译，比如
@import "themes/dark.less";替换掉默认变量，而不是试图“重写” - 用
!default提供兜底值：@link-color: #007bff !default;，方便下游覆盖
别指望变量能改变已渲染的DOM样式行为
Less变量不影响CSS优先级、继承链或JavaScript获取的计算样式。例如：
- 你改了
@font-size-base并重新编译，但页面没刷新 → 样式当然不变 - JS里写了
el.style.fontSize = '14px'，那这个内联样式会盖过所有Less生成的规则 - 浏览器开发者工具里看到的仍是最终CSS，找不到变量名痕迹
变量的价值在于提升维护性，不是提供运行时样式API。真要动态换肤，得配合CSS自定义属性（--primary-color）+ JS切换类名，Less只负责生成初始主题包。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
