如何将CSS中Less变量转换为CSS自定义属性-css教程-PHP中文网

less变量编译后固化为静态值，无法运行时切换；必须通过:export供js读取，并手动添加:root{--primary-color:@primary-color}导出css变量，再用js动态修改setproperty实现主题切换。

如何将css中less变量转换为css自定义属性

@primary-color 这类 Less 变量无法在运行时切换，直接编译后就固化成 #007bff 这样的静态值。想实现主题切换（比如深色模式、用户手动切换），必须把它们“导出”为浏览器可读写的 CSS 自定义属性（即 --primary-color），再由 JS 或媒体查询控制。

Less 变量不能直接生成 :root { --x: @x }？

对，lessc 默认不支持语法 :root { --primary-color: @primary-color; } 自动替换——它会原样输出 @primary-color，导致 CSS 无效。你看到的“变量没生效”，大概率是这一步漏了桥接。

Less 编译是纯文本替换，@primary-color 在构建期就被替换成值，:root 里写死它等于白写
想让 CSS 变量可被 JS 读取，必须确保最终生成的 CSS 中真有 --primary-color: #007bff 这一行，并挂载在 :root 上
推荐做法：用 :export 提取变量供 JS 读取，同时**手动补一条 :root 规则**，把关键变量映射过去

如何用 :export + 手动 :root 实现双路同步

在 theme.less 里集中定义变量，并同时服务 JS 和 CSS：

@primary-color: #007bff;
@font-size-base: 14px;

:export {
  primaryColor: @primary-color;
  fontSizeBase: @font-size-base;
}

:root {
  --primary-color: @primary-color;
  --font-size-base: @font-size-base;
}

:export 块会被 less-loader（Webpack）转成 JS 对象，比如 { primaryColor: '#007bff' }，方便 JS 动态读取或初始化
:root 块才是给 CSS 用的，确保所有组件能通过 color: var(--primary-color) 拿到值
注意：两个地方的变量名要一致（如 @primary-color → --primary-color），否则 JS 改了变量，CSS 不响应

JS 切换主题时，为什么样式没变？

常见原因是只改了 JS 层面的配置，但没触发 CSS 变量更新。正确做法是：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

不要重写整个 <style></style> 标签或重新加载 CSS 文件——太重且易出错
直接操作 document.documentElement.style.setProperty('--primary-color', '#2d8cf0')
确保所有用到颜色的地方都用了 var(--primary-color)，而不是直接写 @primary-color 编译后的值
如果用了 less-plugin-custom-properties 插件，它会自动把 @x 映射为 --x，但需确认插件已启用且配置正确（很多项目漏配 paths 或 modifyVars）