时间戳

首页 > 解决方案 > 将变量从 SASS 导出到 vanilla CSS？

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

问题描述

考虑一下我在不同的.scss文件中有很长的 SASS 变量列表，如下所示：

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

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

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

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

我希望我的 SASS 框架也可以用于 vanilla CSS 项目。

标签： csssasscss-variables

解决方案

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

例如

// 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

推荐阅读