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

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

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

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

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

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

根据SCSS变量创建CSS自定义属性

1 个答案: