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

Question

I have some colors in a map:

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

Now I want to create CSS variables from that map:

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

This looks pretty much like the textbook example. It does indeed create variables and debug shows the correct values (like #fff ). Unfortunately in the CSS it comes out like:

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

What did I wrong?

---

PS: This happens on an Angular 8 project.

Answer 1

You could use interpolation syntax also for $color :

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

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

Your result:

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

Edit: why it is needed here?

That's a very good question, cause I really didn't know why . So I did some research and I found this interesting doc=> https://sass-lang.com/documentation/breaking-changes/css-vars where is written:

To provide maximum compatibility with plain CSS, more recent versions of Sass require SassScript expressions in custom property values to be written within interpolation. Interpolation will also work for older Sass versions, and so is recommended for all stylesheets.

So the difference is because you are using custom property values ( --color-a ) and not a normal CSS property like content