时间戳

首页 > 解决方案 > Map 上的 @each 循环不会用值替换变量，而是在 SASS 中打印变量名

css - Map 上的 @each 循环不会用值替换变量，而是在 SASS 中打印变量名

问题描述

我在地图中有一些颜色：

$colors: (
  a: #fff,
  b: #000,
)

现在我想从该地图创建 CSS 变量：

:root {
  @each $name, $color in $colors {
    @debug($color);
    --color-#{$name}: $color;
  }
}

这看起来很像教科书的例子。它确实创建了变量并且调试显示了正确的值（如#fff）。不幸的是，在 CSS 中它的输出如下：

--color-a: $color;
--color-b: $color;

我做错了什么？

PS：这发生在 Angular 8 项目中。

标签： cssangularloopssass

解决方案

您也可以将插值语法用于$color：

$colors: (
  a: #fff,
  b: #000,
);

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

你的结果：

:root {
  --color-a: #fff;
  --color-b: #000;
}

编辑： 为什么这里需要它？

这是一个很好的问题，因为我真的不知道为什么。所以我做了一些研究，发现这个有趣的文档=> https://sass-lang.com/documentation/break-changes/css-vars写在哪里：

为了提供与纯 CSS 的最大兼容性，较新版本的 Sass 要求将自定义属性值中的 SassScript 表达式写入插值中。插值也适用于较旧的 Sass 版本，因此建议用于所有样式表。

所以区别在于您使用的是自定义属性值（--color-a）而不是普通的 CSS 属性，例如content

推荐阅读