是否有任何工具可以编译声明为 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;
}
像那样编译成它们的非自定义 Prop 等价物
.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)
- 保持规则代码紧凑
最佳答案
这样做实际上并不安全。我可以告诉你,因为我非常努力地进行安全转换。 但是我失败了。
https://github.com/postcss/postcss-custom-properties/issues/1
关于css - 编译非根 CSS 自定义属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43028606/