编译非根 CSS 自定义属性

Question

是否有任何工具来编译在 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)
• 保持规则代码紧凑

Answer 1

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

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

Answer 2

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

次优解决方案。可以转译某些 CSS 以实现更好的浏览器支持。但是，我找到的解决方案不支持非:root元素上的变量。还有其他反对意见反对将"未来"CSS转换为"当前"CSS。据我所知，如果您想转译不在:root元素上的自定义属性，则必须实现自己的转译器(或postcss插件)，但请注意，这通常很难。现在您不需要一般部分，因此这是可能的。据我所知，确实还不存在。

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

现在你说下面的话，

使用有效的 CSS 语法(不减 sass)

但无论如何我都会展示这一点，因为我相信这是解决您问题的有效方法。如果您想/需要支持IE，Edge和/或其他主要浏览器的旧版本(Firefox <31，Chrome <49，Safari <9.1，Opera <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 组织在单独的文件中，以便轻松保持概览。您甚至可以设置一个构建系统，为您拥有的每个主题生成单独的样式表。然后，可以让用户选择替代样式表。浏览器对此有一些支持，但在后一种情况下，使用 JavaScript 进行切换也是绝对可能的。只需将所有样式表设置为禁用，但所选样式表除外。下面是一个示例。