如何让CSS中Less变量与CSS自定义属性共存-css教程-PHP中文网

less变量与css变量分属构建期和运行时，需手动桥接：@primary-color: var(--primary-color, #007bff) 作fallback，:root显式声明css变量，js仅修改--primary-color实现主题切换。

如何让css中less变量与css自定义属性共存

Less变量和CSS变量不是同一层东西，别混着用

Less变量（@primary-color）只在构建时起作用，编译后就变成死值（比如 color: #007bff），浏览器里根本看不到它；而CSS自定义属性（--primary-color）是运行时可读写的，靠 var(--primary-color) 活着。两者共存不是“自动同步”，而是要你手动桥接。

在variables.less里用`@primary-color: var(--primary-color, #007bff);`兜底

这是最常用也最安全的共存写法：Less变量本身不直接参与样式渲染，而是作为 fallback 传给 var() 函数。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@primary-color 仍可用于 Less 内部计算，比如 lighten(@primary-color, 10%) —— 只要它最终被 var() 包裹，就能生效
如果 JS 还没设置 --primary-color，浏览器会退回到 #007bff，避免样式崩掉
千万别写成 @primary-color: #007bff; color: var(--primary-color); —— 这样 @primary-color 和 --primary-color 完全脱钩，改一个另一个不会动

:root 里必须显式声明 `--primary-color`，否则 `var()` 查不到

Less 编译器不会自动把 @primary-color 吐成 CSS 变量，你得自己写：

:root {
  --primary-color: #007bff;
  --font-size-base: 14px;
}

这个 :root 块要放在所有样式之前（或至少确保它被加载），否则后续 var(--primary-color) 会取到 undefined
如果你用 Webpack + less-loader，可以配合 :export 提取 JS 可读的配置，但那对 CSS 渲染没用 —— :export 和 :root 是两件事，不能互相替代
Vite 用户注意：:export 默认不支持，得换插件或改用 JS 导出，但 :root 声明仍需手写

主题切换时，只动 `--primary-color`，别碰 `@primary-color`

运行时 JS 切主题，只该调用：

document.documentElement.style.setProperty('--primary-color', '#ff6b6b');

不要尝试动态重写 Less 变量 —— 浏览器里没有 Less 编译器，@primary-color 在 CSS 文件里早就是固定字符串了
组件内所有颜色引用都得统一走 color: var(--primary-color);，而不是 color: @primary-color;
如果用了 lighten(@primary-color, 10%) 这类函数，得确认它作用在 var(--primary-color) 上是否合法 —— 实际上不合法，lighten() 接收的是颜色值，不是字符串，所以这类计算必须留在 Less 层做，再把结果导出为另一个 CSS 变量

真正难的不是怎么写，是怎么让团队所有人记住：Less变量只管开发期组织和计算，CSS变量才管运行时响应。漏掉其中一环，主题切换就只剩一半功能。