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

Question

我有一个颜色名称和值的 SCSS 映射。我想从它们创建 CSS 自定义属性，如下所示：

社会保障局

$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 到 CSS 上，您可以使用以下内容：

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

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

jsfiddle.net 上的演示

在SASS 到 CSS 上，您必须使用@each内部:root元素（或在内部定义元素）：

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

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