Less变量无法运行时切换，必须通过CSS自定义属性（--xxx）兜底：Less仅在构建期将@primary-color等编译为静态值，而主题切换需依赖JS动态修改:root下的CSS变量，并在样式中统一使用var(--primary-color)引用。
Less变量无法在运行时动态切换，必须用CSS自定义属性兜底
Less编译发生在构建阶段，@primary-color这类变量最终被替换成固定值（如#007bff），一旦CSS输出就不可更改。想实现主题切换（比如深色/浅色模式），光靠Less变量完全不够——浏览器里没有“重新编译Less”的机制。
真正可行的路径是：用Less管理开发期的主题配置，再把关键变量同步导出为CSS自定义属性（--primary-color），让JS或媒体查询能实时读取和修改它们。
用.less文件统一维护主题源，再用:export或@plugin导出CSS变量
推荐在theme.less里集中定义所有主题色、间距、圆角等，并通过:export伪类自动映射为CSS自定义属性：
@primary-color: #007bff;
@font-size-base: 14px;
:export {
primaryColor: @primary-color;
fontSizeBase: @font-size-base;
}
这样Webpack（配合less-loader）会把:export块编译成JS对象，供JS读取；同时你还需要手动在根元素上写一条CSS规则，把这些值挂到:root下：
:root {
--primary-color: @primary-color;
--font-size-base: @font-size-base;
}
- 别漏掉
:root这层声明，否则CSS变量不会生效 -
:export只对JS有用，对CSS变量无直接作用，二者要分开写 - 如果用Vite，
:export不被原生支持，得换用@plugin "postcss-plugin-variables"或改用JS模块导出
在组件样式中优先使用var(--primary-color)而非@primary-color
Less变量适合做计算（比如lighten(@primary-color, 10%)），但最终渲染层必须依赖CSS变量才能响应式更新。所以实际写样式时：
- 颜色、字体大小、阴影参数等“可变维度”，一律用
var(--primary-color) - 需要计算的中间值（如悬停色），可在Less里算好再赋给另一个CSS变量：
--primary-hover: lighten(@primary-color, 10%); - 避免混用：
color: @primary-color;+background: var(--primary-color);会导致主题切换时颜色不一致 - 注意CSS变量不支持Less函数，
var(--primary-color, darken(@primary-color, 5%))这种写法无效
深色模式适配要靠@media (prefers-color-scheme: dark)覆盖:root
不能指望Less自己识别系统偏好。必须显式在CSS中用媒体查询重设CSS变量：
:root {
--primary-color: #007bff;
}
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #0056b3;
}
}
如果你用JS控制主题，就别写@media，改用给加class="theme-dark"，然后写：
:root.theme-dark {
--primary-color: #0056b3;
}
关键点在于：所有主题逻辑终点都是CSS变量的值变更，Less只是帮你管住初始值和计算逻辑，它不参与运行时。
最常被忽略的是变量作用域——CSS变量默认继承，但:root里的值不会自动被子元素的var()捕获，除非你确认父级没用all: unset或inherit打断继承链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
