Question

是否有任何工具可以编译在非自定义的CSS自定义属性：root rule？我想要跟随自定义属性的代码

.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元素上的dark / light类来切换颜色方案
使用有效的css语法（没有少量）
保持规则代码紧凑
支持非css4浏览器

Answer 1

理想的解决方案。您的示例是有效的CSS和can be used中的many browsers（不是在IE，Edge（但正在开发中）和Opera Mini编写此答案，2017-03-27，其他主流浏览器都很好。

次优解决方案。有些CSS可以transpiled来获得更好的浏览器支持。我发现的解决方案在非:root元素上有not support个变量。还有other objections反对将'未来'CSS转换为'当前'CSS。据我所知，如果您想要转换不在:root元素上的自定义属性，则必须实现自己的转换器（或postcss插件），但要注意is hard } 一般来说。现在你不需要通用部分，所以它是可能的。就我所知，就是这样，不存在。

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

现在你说以下，

使用有效的css语法（不用少）

但无论如何我会表明这一点，因为我相信这是解决问题的有效方法。如果你想/需要支持其他主流浏览器的IE，Edge和/或旧版本（Firefox＆lt; 31，Chrome＆lt; 49，Safari＆lt; 9.1，Opera＆lt; 36）

您可以使用SASS执行此操作，以便在服务器端进行转换。

// 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;
}

这不是你想要获得的，但非常接近。实际上，我认为这是获得所需输出的最接近的。我知道你想要

保持规则代码紧凑

但你在那里说的（我认为）是你想要从他们的规则中拆分自定义属性以节省规则数量，这不是我所知道的任何预处理器支持的。

您可以在单独的文件中整理源SASS，以便轻松查看概述。您甚至可以设置一个构建系统，为您拥有的每个主题生成单独的样式表。然后，您的用户可以选择alternative stylesheet。浏览器对此有一些支持，但在后一种情况下，使用JavaScript进行切换也是绝对可能的。只需将所有样式表设置为disabled，但所选样式除外。 Here is an example.

Answer 2

这样做实际上并不安全。我可以告诉你，因为我努力做出安全的改造。但我失败了。

https://github.com/postcss/postcss-custom-properties/issues/1

编译非根CSS自定义属性

2 个答案: