编译非根CSS自定义属性

是否有任何工具可以编译在not:root规则中声明的CSS自定义属性？我想要以下带有自定义属性的代码

.dark {
  --bg-color: black;
  --fg-color: white;
}

.light {
  --bg-color: white;
  --fg-color: black;
}

.foo {
  background: var(--bg-color);
  display: block;
}

.bar {
  color: var(--fg-color);
  display: inline;
}

被编译成非定制的道具等价物

.light .foo, .light.foo {
  background: white;
}

.dark .foo, .dark.foo {
  background: black;
}

.light .bar, .light.bar {
  color: black;
}

.dark .bar, .dark.bar {
  color: white;
}

.foo {
  display: block;
}

.bar {
  display: inline;
}

目标是

• 通过在根DOM元素上切换暗/亮类来切换颜色方案
• 使用有效的css语法（无sass）
• 保持规则代码紧凑
• 支持非css4浏览器

---

理想解决方案。您的示例是有效的CSS和in（不在IE、Edge（但正在开发）和Opera Mini中，截至撰写此答案，2017-03-27，其他主要浏览器都可以）

次优解决方案。可以使用一些CSS来实现更好的浏览器支持。但是，我找到的解决方案在非

：root

元素上没有变量。还有人反对将“未来”CSS转换为“当前”CSS。据我所知，如果您不想在

：root

元素上传输自定义属性，但通常需要注意的是，您必须实现自己的传输程序（或插件）。现在你不需要一般的部分，所以这是可能的。就我所知，现在还不存在

预处理解决方案。当然，您不需要自定义属性的常规实现。对于同一组属性，不同的主题有自己的值，仅此而已。因此，可以使用任何CSS预处理器作为预处理步骤创建单独的样式表

现在你说

使用有效的css语法（无sass）

但我还是要展示这一点，因为我相信这是解决你问题的有效方法。如果你想/需要支持IE、Edge和/或其他主流浏览器的旧版本（Firefox<31、Chrome<49、Safari<9.1、Opera<36），那么它肯定是我所知道的唯一一款真正有效的浏览器

例如，您可以使用在服务器端执行传输

// define styles, use variables throughout them
// your entire style definition goes into this mixin
@mixin myStyles($fg-color, $bg-color) {
  .foo {
    display: block;
    background: $bg-color;
  }

  .bar {
    display: inline;
    color: $fg-color;
  }
}

// define themes, that set variables for the above styles
// use named arguments for clarity
.dark {
  @include myStyles(
    $fg-color: white,
    $bg-color: black
  );
}

.light {
  @include myStyles(
    $fg-color: black,
    $bg-color: white
  );
}

这可编译为以下内容

.dark .foo {
  display: block;
  background: black;
}
.dark .bar {
  display: inline;
  color: white;
}

.light .foo {
  display: block;
  background: white;
}
.light .bar {
  display: inline;
  color: black;
}

这并不完全是你想要得到的，但非常接近。事实上，我认为这是最接近你将得到你想要的输出。我知道你想

保持规则代码紧凑

但您（我想）想说的是，您希望从它们的规则中分离自定义属性以节省规则的数量，我知道任何预处理器都不支持这一点

---

您可以将源SAS组织在单独的文件中，以便轻松地进行概述。您甚至可以设置一个构建系统，为您拥有的每个主题生成一个单独的样式表。然后可以让您的用户选择一个。浏览器对此有一些支持，但在后一种情况下，使用JavaScript切换也是完全可能的。只需将所有样式表设置为除所选样式表之外的其他样式表

这样做实际上并不安全。我可以告诉你，因为我非常努力地进行安全转换。 但我失败了

---

你说的“编译”是什么意思？您是在谈论将自定义特性转换为其非自定义道具等价物吗？您的自定义道具示例已按预期工作。我希望transpiler/预处理器将“自定义属性转换为其非自定义道具等价物”，但您的代码是反向的，与我的示例不同。如果添加新的.block1.block2类，那么我需要更改mixin定义，而这不是我想要的。我想声明深色和浅色，并在.block中使用它们rules@exe-我想我所拥有的和你的例子是一样的。无论如何，我对我的答案进行了大量编辑，希望能澄清很多。希望这有帮助。