提问人：Plagiatus 提问时间：1/17/2023 最后编辑：Plagiatus 更新时间：1/17/2023 访问量：86
使用 SCSS 生成默认值和 CSS 变量
use SCSS to generate both defaults and css variables
问：
我正在实现一种网站风格。
出于遗留支持的原因，我需要支持 IE11，至少在一段时间内是这样。出于工作流程和我的理智原因，我想尽可能使用 css 变量。
我已经研究了这个解决方案，它会生成一些有效的东西，但使用起来非常冗长。
我的目标是最终得到一个硬编码的值，该值立即被 CSS 变量覆盖。这样，我就可以为每个人添加一个默认主题，并为那些支持 css 变量的浏览器添加不同的主题（如 darkmode）。显然不需要自己写所有这些。
所以我的想法是我可以写这样的东西：
$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 的好解决方案，那可能是我会选择的。
答：
1赞
Amaury Hanser
1/17/2023
#1
以下是您可能想要改进的快速解决方案：
- 定义包含所有颜色的地图：
$colors: ("blue": #0000ff, "red": #ff0000, "green": #00ff00);
- 遍历地图以创建 css 自定义属性：
@each $color, $value in $colors {
:root {
--#{$color}: #{$value};
}
}
- 创建一个 mixin 以输出回退和值。
我决定创建一个 mixin，它需要 2 个参数、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")
}
评论