怎样用CSS中Less生成深色主题变量-css教程-PHP中文网

less无法生成运行时变量，需用@themes map配合each()批量导出css自定义属性，如--bg-color，并通过data-theme属性控制主题切换，组件样式必须使用var(--xxx)引用。

怎样用css中less生成深色主题变量

Less 里不能直接生成深色主题的“运行时变量”

Less 编译完就没了，@bg-color 这种变量在 CSS 输出里早被替换成 #141414 了，浏览器里根本不存在“切换变量值”这回事。所谓“生成深色主题变量”，实际是让 Less 帮你批量产出一组 --bg-color、--text-color 这样的 CSS 自定义属性，再由 JS 或 HTML 属性控制生效。

用 `@themes` Map + `each()` 批量导出 CSS 变量

这是目前最可控、可扩展的方式，尤其适合多主题（light/dark/sepia 等）场景。关键点不是“写 dark.less”，而是用 Less 原生 @themes 结构驱动生成：

@themes 必须是顶层 Map，不能嵌套在 mixin 或选择器里
each() 遍历时，@theme-vars[primary-color] 是唯一合法取值写法，@theme-vars.primary-color 会报错
生成的 :root[data-theme="dark"] 选择器必须带 data-theme 属性，JS 切换时才匹配得上

@themes: {
  light: {
    primary-color: #1890ff;
    bg-color: #ffffff;
    text-color: #333333;
  };
  dark: {
    primary-color: #177ddc;
    bg-color: #141414;
    text-color: #f0f0f0;
  };
};

each(@themes, {
  @theme-name: @key;
  @theme-vars: @value;
  :root[data-theme="@{theme-name}"] {
    --primary-color: @theme-vars[primary-color];
    --bg-color: @theme-vars[bg-color];
    --text-color: @theme-vars[text-color];
  }
});

组件样式必须用 `var(--xxx)`，不能用 `@xxx`

哪怕你在 variables.less 里写了 @color-brand-primary: var(--primary-color, #1890ff);，也不能在 lighten()、darken() 里用它——这些函数不认 CSS 变量，会直接编译失败。

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

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

下载

所有颜色计算（如 lighten(@color, 10%)）必须在 Less 编译期完成，所以只能对原始 hex 值操作
如果深色主题需要“比主色暗 15% 的边框”，得提前算好：--border-color-dark: #0e4d7a;，而不是指望 lighten(var(--primary-color), -15%)
推荐做法：深色主题的衍生色（hover、disabled、border）全部在 @themes Map 里显式定义，不依赖函数推导

构建工具要监听 `themes.less` 变更并重编译

改了 @themes 里的值，但没触发 webpack/vite 重新编译，新 CSS 变量就不会更新。这不是 Less 的问题，是构建链路的盲点。

Vite 用户注意：vite-plugin-style-import 的 patterns 必须用 path.resolve() 绝对路径，别写 @/styles/themes.less
Webpack 用户检查 less-loader 是否配置了 modifyVars 或 globalVars ——它们和 @themes Map 是两套机制，混用会覆盖或冲突
最稳妥方式：把 @themes 定义单独抽成 themes.less，并在入口 index.less 中 @import 它；确保该文件修改后能触发全量样式重建