Question

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

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

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

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

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

我希望我的SASS框架也可以在原始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

Answer 2

现在有了sass modules和新的sass:meta.module-variables()函数：它就可以实现

将模块中定义的所有变量返回，作为从变量名（无$）到这些变量的值的映射。

例如

// _vars.scss

$color: red;
$font: Helvetica, sans-serif;

// style.scss

@use 'sass:meta';
@use 'vars';

:root {
  @each $name, $value in meta.module-variables(vars) {
    --#{$name}: #{$value};
  }
}

输出

:root {
  --color: red;
  --font: Helvetica, sans-serif;
}

⚠️Sass模块当前仅在Dart Sass中受支持

将变量从SASS导出到原始CSS？

2 个答案: