旧版浏览器回退的 CSS 变量

Question

TL;DR：如何使用 SCSS 为旧版浏览器提供具有后备功能的 CSS 变量。

我试图理解这篇 文章。在我看来，你必须已经是高级 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... */
}

原文由 Ced 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

$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);
}

等等瞧 :)

原文由 rdhainaut 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

更新： Postcss 自定义属性 可以做后备，并且比下面的代码更容易

第 1 步：声明 scss 变量

所以首先我们想把一些变量放在 $map 中，我会选择颜色变量：

 $colors: (
  primary: #FFBB00,
  secondary: #0969A2
);

第 2 步：自动生成 css 4 var

 // ripped CSS4 vars out of color map
:root {
  // each item in color map
  @each $key, $value in $colors {
    --colors-#{$key}: $value;
  }
}

在 root 中发生的是：对于颜色 映射 中的每个键和值，我们打印以下内容：

 --colors-#{$key}: $value;

这对应于css变量声明。我相信 #{} 的奇怪之处在于，值周围没有空格。因此结果是：

 --colors-primary: #FFBB00,
--colors-secondary: #0969A2

请注意，前缀 ( --colors- ) 与其上方的 scss 颜色图同名。为什么会在最后一步变得清晰。

---

第三步：大量地图！

 $props: (
  background-color: $colors
);

$map-maps: (
  background-color: colors
);

在这里，我们添加映射 $props 将 css 属性映射到包含值的映射。 background-color 将保持颜色，所以正确的地图是 $colors 。

map-maps 是道具的副本，其中我们有所述地图的名称而不是地图。 （这与步骤 2 中的注释有关）。

第4步：让它工作！

 @mixin v($prop, $var) {
  // get the map from map name
  $map: map-get($props, $prop);
  // fallback value, grab the variable's value from the map
  $var-fall: map-get($map, $var);
  // our css4 variable output
  $var-output: var(--#{$map}-#{$var});
  #{$prop}: $var-fall;
  // css4 variable output
  #{$prop}: $var-output;
}

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

我将文章中的代码简化了很多，它仍然有效，至少对于这个例子，文章中的代码考虑了更多。

无论如何，这就是发生的事情。

首先，我们调用 mixin：

   @include v(background-color, primary);

然后一进门，

  $map: map-get($props, $prop); // map-get($props, background-color)

we have a variable called $map to which we assign the value that is inside the $props map at the key background-color which happen to be the $colors 地图。这有点像迷宫，但一旦你解决了它就没有那么复杂了。

然后对于后备：

  $var-fall: map-get($map, $var);

这只是在 $var 键（恰好是主键）处获取我们刚刚获得的映射的值（即 $colors ）。因此结果是 #FFBB00 。

对于 css 变量

  $map-name: map-get($map-maps, $prop);
  $var-output: var(--#{$map-name}-#{$var});

我们重新创建了在 @each 循环中生成 var 的操作

---

整个代码是：

 $colors: (
  primary: #FFBB00,
  secondary: #0969A2
);

// ripped CSS4 vars out of color map
:root {
  // each item in color map
  @each $name, $color in $colors {
    --colors-#{$name}: $color;
  }
}

$props: (
  background-color: $colors,
  color:            $colors
);

$map-maps: (
  background-color: colors
);

@mixin v($prop, $var) {
  // get the map from map name
  $map: map-get($props, $prop);
  // fallback value, grab the variable's value from the map
  $var-fall: map-get($map, $var);
  // our css4 variable output

  $map-name: map-get($map-maps, $prop);
  $var-output: var(--#{$map-name}-#{$var});

  #{$prop}: $var-fall;
  // css4 variable output
  #{$prop}: $var-output;
}

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

---

现在这是对文章中所做工作的简化。您应该检查一下以使代码更加健壮。

原文由 Ced 发布，翻译遵循 CC BY-SA 3.0 许可协议