less变量需在variables.less顶层定义语义化颜色变量（如@primary: #007bff），所有组件样式引用该变量实现全局复用；但其仅编译时生效，运行时换肤必须通过css自定义属性（--primary-color）桥接并由js动态修改。
Less变量如何定义全局主题色并复用
Less变量本身是编译时静态替换的，不能直接实现运行时切换。所谓“动态切换”，本质是预编译多套主题CSS文件，或配合CSS自定义属性（--primary-color）在运行时更新。纯Less变量只适合构建期主题定制。
推荐做法：用Less变量管理设计系统中的颜色语义，例如：
@primary: #007bff;<br>@secondary: #6c757d;<br>@success: #28a745;所有组件样式都引用这些变量，比如
.btn-primary { background-color: @primary; }。这样修改一处，全站颜色自动同步——但必须重新编译生成CSS。
如何用Less mixin封装主题切换逻辑
避免在每个选择器里重复写@media或:root覆盖，用mixin统一注入主题变量更可控。例如定义一个.theme-dark() mixin：
.theme-dark() {<br> @primary: #0d6efd;<br> @bg: #212529;<br> body { background-color: @bg; }<br> .btn { color: @primary; }<br>}
再在需要的地方调用：.theme-dark();。注意：mixin内定义的变量仅在该作用域生效，不会污染全局；若需跨模块共享，仍要靠顶层@primary变量统一管理。
- 不要在mixin里覆盖已声明的顶层变量（Less不支持重赋值）
- 多个主题建议拆分成独立Less文件（如
theme-light.less、theme-dark.less），通过构建脚本选择导入 - mixin适合局部样式调整，全局主题切换优先走变量+编译流程
为什么不能用Less变量实现浏览器端实时换肤
Less在构建阶段就被编译成普通CSS，所有@primary都被替换成具体颜色值（如#007bff），最终输出的CSS里根本不存在变量。浏览器运行时无法修改Less变量，也就无法触发重渲染。
真正可运行时切换的方式只有两种：
- 用CSS自定义属性（
--primary-color） + JavaScript修改document.documentElement.style.setProperty() - 预编译多套CSS文件，通过
<link rel="stylesheet">动态切换href
如果坚持用Less管理颜色值，它只应作为设计Token的源文件，输出后交给CSS变量或构建工具消费，而不是指望它自己“动起来”。
与CSS自定义属性协同使用的安全写法
可以将Less变量作为CSS变量的默认值，兼顾编译期校验和运行时灵活性：
:root {<br> --primary-color: @primary;<br> --text-color: @text-color;<br>}<br><br>.button {<br> background-color: var(--primary-color, @primary);<br> color: var(--text-color, @text-color);<br>}
这样既保留Less变量的类型检查和IDE提示能力，又为JS运行时覆盖留出入口。注意var(--x, @fallback)里的@fallback必须是编译期确定的值，不能是另一个变量引用（Less不支持嵌套var()解析）。
容易忽略的是：CSS变量有继承和作用域特性，而Less变量没有；混用时务必确认var()读取的上下文是否符合预期，比如深嵌套组件可能需要inherit或!important兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
