使用 scss @each 生成 css 变量不起作用答案

【问题标题】：Generating css variables with scss @each not working使用 scss @each 生成 css 变量不起作用
【发布时间】：2020-01-09 07:43:42
【问题描述】：

我正在使用 ionic 4 项目和 scss。我有一些奇怪的行为，而我正在尝试使用 @each 创建一个全局 CSS 变量：

:host {
      $colors-availability: (
        early-day: #e8ab00,
        long-day: #854fa5,
        whole-day: #fe307b,
        all-day: #32773e,
        morning: #87cc93,
        afternoon: #4bb15d,
        late: #fa8072,
        twilight: #40e0d0,
        night: #16151b
      );

      @each $name, $color in $colors-availability {
        --ion-color-#{$name}: $color;
      }
}

这是我在 theme/variables.scss 文件中的代码。我希望所有这些变量都与颜色有关，但输出是这样的：

我没有散列颜色值。任何想法？我尝试了一切（color（）函数等）。谢谢。

【问题讨论】：

通过添加#{}，您可以像使用名称一样使用颜色
你需要interpolate你的变量：#{$color}

标签： css sass ionic4

【解决方案1】：

尝试如下方式：

--ion-color-#{$name}: #{$color};

【讨论】：