将变量从SASS导出到原始CSS? [英] Export variables from SASS to vanilla CSS?

问题描述

考虑一下，我在不同的 .scss 文件中都有一长串SASS变量，如下所示:

Consider I have a long list of SASS variables in different .scss files like this:

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

将这些变量导出为原始CSS变量的最有效方法是什么?

What would be the most effective way to export these variables as vanilla CSS variables?

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

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

Maybe, there is a SASS-way or even some pre-processor?

我希望我的SASS框架也可以在原始CSS项目中使用.

I want my SASS framework to be also used in vanilla CSS projects.

推荐答案

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

I think the best way to do this would be using something like a variable map;

例如

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

这篇关于将变量从SASS导出到原始CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！