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

问题描述

我正在使用 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";
}

解决方法

您正在寻找的东西并不完全可以作为一个自动化过程。
问题是无法从地图中声明 $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;
  }
}