less变量无法运行时修改，必须用css变量（--primary-color）桥接：@primary-color在编译时被硬编码为#007bff，js无法读取；需在variables.less中定义@primary-color: var(--primary-color, #007bff)，再通过document.documentelement.style.setproperty()动态修改。
不能直接把 @primary-color 改成 --primary-color 就完事——Less 变量是编译期静态值，CSS 变量是运行时可变的，二者语义和生命周期完全不同。迁移的核心是建立桥接层，让 Less 编译结果里真正输出 var(--primary-color)，而不是硬编码颜色值。
为什么直接替换变量名会失效
Less 里的 @primary-color: #1890ff; 在编译时就被替换成具体值，生成的 CSS 是 color: #1890ff;；而 --primary-color 是浏览器运行时才读取的自定义属性，两者不互通。如果你只改变量名、不改用法，Less 会报错 NameError: variable @--primary-color is undefined，因为 -- 开头不是合法 Less 变量名。
- Less 变量必须以
@开头，且不能含-连字符（@primary-color合法，但@--primary-color不合法） - 想让 Less 输出
var(--primary-color)，得用字符串插值语法：@primary-color: var(--primary-color, #1890ff); - 如果在
lighten(@primary-color, 10%)这类函数里使用该变量，会失败——lighten()无法处理var()字符串，只能操作颜色值
如何让 Less 编译出真正的 CSS 变量
关键不是改变量名，而是改变量值：把 Less 变量定义成一个带默认值的 var() 表达式。这样既保留了 Less 的结构，又把最终控制权交给 CSS 变量。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 在
variables.less中写：@primary-color: var(--primary-color, #1890ff); - 所有组件文件顶部必须显式
@import "variables.less";，否则变量不可见 - 避免在函数中调用该变量：
color: lighten(@primary-color, 10%);❌；应改为color: var(--primary-color-lighter, #40a9ff);✅（预计算好浅色值，也用 CSS 变量） - Vite 用户注意：
vite-plugin-style-import的patterns必须用path.resolve()绝对路径引入变量文件，相对路径@/styles/variables.less会被忽略
怎么让 JS 动态切换主题生效
Less 本身不支持运行时换值，所谓“动态”其实是靠 JS 修改根节点的 CSS 变量，然后让已编译的 CSS 自动响应。前提是你的 Less 文件里所有颜色、间距都用了 var() 桥接。
- 初始化时设置：
document.documentElement.style.setProperty('--primary-color', '#ff6b6b'); - 深色模式切换：
document.documentElement.setAttribute('data-theme', 'dark');，配合 CSS 中的[data-theme="dark"] { --primary-color: #52c418; } - 不要试图用 JS 注入新 Less 代码或修改
document.styleSheets——浏览器不认识 Less 语法，无效 - 检查是否生效：打开 DevTools → Elements → :root → 查看
--primary-color值是否更新，再看对应元素 computed style 是否响应变化
迁移后最容易被忽略的坑
最难的不是语法转换，是设计系统语义的对齐。比如原项目里三处 #333 分别代表文字色、边框色、禁用态提示色——迁移到 CSS 变量后，你得给它们起三个不同名字：--text-color、--border-color、--disabled-color，否则改一个崩三处。
- 旧变量文件里混着
@spacing-md: 16px;和@button-height: 40px;？后者不是设计常量，应移进 Mixin 或组件内部，别污染全局变量池 - 第三方 UI 库（如 Ant Design）的样式若也想主题化，不能直接
@import "antd.less"，要用@import (inline) "antd.css"原样保留，再用 CSS 变量覆盖关键属性 - 每次构建后务必检查生成的 CSS 文件体积：如果暴涨超 30%，大概率是
@import链没加(reference)，导致同一套变量被重复编译多遍
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
