我正在实现网站样式。
出于遗留支持的原因，我需要支持 IE11，至少一段时间。出于工作流程和我的理智原因，我想尽可能使用 css 变量。
我已经研究过这个解决方案，它会生成一些有效的东西，但使用起来相当冗长。
我的目标是最终得到一个硬编码值，该值会立即被 CSS 变量覆盖。这样我就可以为每个人添加默认主题，并为那些支持 css 变量的浏览器添加不同的主题（例如暗模式）。显然不需要我自己写所有这些。
所以我的想法是我可以写这样的东西：
$foo {...?}
:root {
--foo: red;
}
:root.dark {
--foo: black;
}
p {
color: $foo;
}
它被转译为
:root {
--foo: red;
}
:root.dark {
--foo: black;
}
p {
color: red;
color: var(--foo);
}
这可以用 scss 实现吗？我不想想向这个项目添加一些随机的 npm 模块或其他第三方编译器和转译器来使其变得臃肿。
我知道有可能为 IE11 添加一个 polyfill，以增加对 CSS 变量的支持，但到目前为止我发现的大多数都有某种形式的不幸的限制（另外，它们是我更喜欢的第三方代码）如果可以的话避免）。如果使用 SCSS 没有好的解决方案，我可能会采用这种解决方案。
以下是您可能想要改进的快速解决方案：
$colors: ("blue": #0000ff, "red": #ff0000, "green": #00ff00);@each $color, $value in $colors { :root { --#{$color}: #{$value}; } }我决定创建一个需要 2 个参数的 mixin，即 css 属性和您想要的颜色。
@mixin propertyPlusColorValue($property, $color) { #{$property}: map.get($colors, $color); #{$property}: var(--#{$color}); }.foobar { @include propertyPlusColorValue(color, "blue"); @include propertyPlusColorValue(background-color, "red") }完整代码：
@use "sass:map"; $colors: ("blue": #0000ff, "red": #ff0000, "green": #00ff00); @each $color, $value in $colors { :root { --#{$color}: #{$value}; } } @mixin propertyPlusColorValue($property, $color) { #{$property}: map.get($colors, $color); #{$property}: var(--#{$color}); } .foobar { @include propertyPlusColorValue(color, "blue"); @include propertyPlusColorValue(background-color, "red") }