Не удается установить переменную SCSS в переменную CSS?
Рассмотрим следующий SCSS:
$color-black: #000000;
body {
--color: $color-black;
}
Когда он компилируется с помощью node-sass версия 4.7.2, он создает следующий CSS:
body {
--color: #000000;
}
Когда я компилирую тот же SCSS с версией 4.8.3 или выше, он дает следующее:
body {
--color: $color-black;
}
Что мне не хватает? Я проверил логи релизов, но ничего полезного не нашел. Кроме того, мне интересно, является ли это изменение подлинным, почему оно имеет только незначительное изменение версии? Разве это не должен быть основной релиз?
Кроме того, какая у меня альтернатива? Следует использовать Интерполяция?
Ответы 3
scss и css
Я нашел обходной путь для сопоставления переменных scss с переменными css.
См. Ответ Терри для лучшего использования
Scss:
// sass variable map
$colors: (
color-black: #FFBB00
);
// loop over each name, color
:root {
// each item in color map
@each $name, $color in $colors {
--#{$name}: #{$color};
}
}
CSS:
:root {
--color-black: #FFBB00;
}
Просто используйте интерполяцию строк:
$color-black: #000000;
body {
--color: #{$color-black};
}
Очевидно, старое поведение не предназначено и нарушало языковые спецификации SASS:
У меня была проблема со старыми версиями sass.
При попытке составить список переменных, поступающих из массива, он застревает в двойном тире. Вот мое решение на случай, если это кому-то поможет
$var-element:'--';
:root {
@each $color in $color-variables {
#{$var-element}#{nth($color, 1)}: #{nth($color, 2)};
}
}
Ага, используйте строковую интерполяцию, т.е.
--color: #{$color-black};. См .: github.com/sass/node-sass/issues/2336