Цикл @each над Map не заменяет переменную значением, а печатает имя переменной в SASS

Question

У меня есть несколько цветов на карте:

$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.

Answer 1

Вы можете использовать синтаксис интерполяции также для $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 / Документация / Breaking-изменения / css-vars , где написано:

Дляобеспечить максимальную совместимость с простым CSS, более поздние версии Sass требуют, чтобы выражения SassScript в значениях пользовательских свойств записывались в рамках интерполяции.Интерполяция также будет работать для более старых версий Sass, поэтому рекомендуется для всех таблиц стилей.

Таким образом, разница в том, что вы используете пользовательские значения свойств (--color-a), а не обычное свойство CSS, такое как content