具有旧浏览器后备功能的 CSS 变量

Question

TL;DR:如何使用 SCSS 让 CSS 变量为旧版浏览器提供回退。

我正在尝试理解这个 article .在我看来，您必须已经是高级 SASS 用户才能理解它，但我不是。更糟糕的是，这是我找到的唯一一篇关于该主题的文章。

这是我要实现的目标:

我的 scss 应该是这样的:

body {
  @include v(background-color, primary)
}

那么处理后的CSS应该是

body{
   background: yellow; /* Yellow being defined above as the primary color */
   background: var(--color-primary);
}

通过尝试，我已经可以像这样获取 CSS 变量的值:

$colors: (
  primary: yellow,
);

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

@mixin background-color($color_) {
  background: var(--color-#{$color_});
}

使用方法:

body{
  @include background-color(primary);
}

这将导致:

body {
    background: var(--color-primary);
    /* But the fallback is missing :(, I tried  things with the map-get but it's really eluding me... */
}

Answer 1

如果您使用的是 Sass，则可以通过 Sass 混入自动执行回退。创建一个 CSS 变量名称及其值的映射，然后您可以在输出后备样式和首选样式的混合中查找这些值

$vars: (
  primary: yellow,
);

:root {
  --primary: map-get($vars, primary);
}

@mixin var($property, $varName) {
  #{$property}: map-get($vars, $varName);
  #{$property}: var(--#{$varName});
}

上面的 mixin 是这样使用的:

body {
  @include var(background-color, primary);
}

并输出以下 CSS:

:root {
  --primary: yellow;
}

body {
  background-color: yellow;
  background-color: var(--primary);
}

Et voilà :)