css - 将变量从 SASS 导出到 vanilla CSS？

Question

考虑到我在不同的 .scss 中有很长的 SASS 变量列表像这样的文件:

$app-color-white: #ffffff;
$app-color-black: #000000;

将这些变量导出为 vanilla CSS 变量的最有效方法是什么？

:root {
  --app-color-white: #ffffff;
  --app-color-black: #000000;
}

也许，有一种 SASS 方式，甚至一些预处理器？

我希望我的 SASS 框架也能用于 vanilla CSS 元素。

Answer 1

我认为最好的方法是使用变量映射之类的东西；

例如。

// sass variable map
$colors: (
  primary: #FFBB00,
  secondary: #0969A2
);

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

输出:

:root {
  --color-primary: #FFBB00;
  --color-secondary: #0969A2;
}

来源: https://codepen.io/jakealbaugh/post/css4-variables-and-sass