使用SCSS生成默认值和CSS变量

Question

我正在实现网站样式。

出于遗留支持的原因，我需要支持 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 没有好的解决方案，我可能会采用这种解决方案。

Answer 1

以下是您可能想要改进的快速解决方案：

1. 使用所有颜色定义地图：

$colors: ("blue": #0000ff, "red": #ff0000, "green": #00ff00);

2. 循环地图以创建 CSS 自定义属性：

@each $color, $value in $colors {
    :root {
        --#{$color}: #{$value};
    }
}

3. 创建一个 mixin 以输出后备和值。
   我决定创建一个需要 2 个参数的 mixin，即 css 属性和您想要的颜色。

@mixin propertyPlusColorValue($property, $color) {
    #{$property}: map.get($colors, $color);
    #{$property}: var(--#{$color});
}

4. 然后你可以像这样使用它：

.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")
}