从 SCSS 变量创建 CSS 自定义属性

Question

我有一个颜色名称和值的 SCSS 映射。我想像这样从它们创建 CSS 自定义属性：

SCSS

$colours:(
  "gray-500":    #f7fafc,
  "red-500":     #f56565,
  "green-500":   #48bb78
);

所需的结果 CSS

--gray-500:  #f7fafc;
--red-500:   #f56565;
--green-500: #48bb78;

我知道如何在地图中循环，但我要了解的是如何将键用作自定义属性名称，以及如何在其前面加上 --。我能找到的与该主题相关的所有示例都涉及手动输入自定义属性名称 - 而不是从地图的键中收集它。

这是我目前所拥有的：

@each $colour, $value in $colours {
    --#{$colour}:$value;
}

这会产生错误：expected "{" 插入符号指向此行的末尾：

--#{$colour}:$value;

我正在使用 Dart Sass 1.23.7

Answer 1

在SCSS to CSS 上，您可以使用以下内容：

:root {
  $colours:(
    "gray-500": #f7fafc,
    "red-500": #f56565,
    "green-500": #48bb78
  );

  @each $key_name, $value in $colours {
    --#{$key_name}: #{$value};
  }
}

demo on jsfiddle.net

在SASS to CSS 上，您必须在:root 元素内使用@each（或在其中定义一个元素）：

$colours:(
  "gray-500": #f7fafc,
  "red-500": #f56565,
  "green-500": #48bb78
);

:root {
  @each $key, $value in $colours {
    --#{$key}: #{$value};
  }
}