如何拥有与 SCSS 变量和 CSS 自定义属性相同的变量？

【问题标题】：How to have the same variables as both SCSS variables and CSS custom properties?如何拥有与 SCSS 变量和 CSS 自定义属性相同的变量？
【发布时间】：2020-12-22 11:43:48
【问题描述】：

我正在使用 SCSS 变量重构代码库以改用 CSS 自定义属性。为了向后兼容，我想将所有变量也保留在 SCSS 中，而不必重复它们。有没有办法做到这一点？

基本上我想要实现的是这个

$variables: (
  foo: 10px,
  bar: red,
  baz: "foo",
);

// This should be the result without repeating foo, bar & baz
$foo: 10px;
$bar: red;
$baz: "foo";

:root {
  --foo: 10px;
  --bar: red;
  --baz: "foo";
}

【问题讨论】：

标签： css sass css-variables

【解决方案1】：

您正在寻找的东西并不完全可以作为一个自动化过程。
问题是不能从地图中声明$var。您需要自己显式声明每个$var。

因此，接近您想要的结果的唯一方法是创建一个单独的地图，对其进行迭代以生成 CSS 自定义属性，并且仍然必须手动声明每个 $var。

$foo: foo;
$bar: bar;
$faz: faz;

//

$vars: (
  foo: foo,
  bar: bar,
  faz: faz,
);

:root {
  @each $key, $value in $vars {
    --#{$key}: $var;
  }
}

【讨论】：