Невозможно установить переменную SCSS в переменную CSS?

Question

Рассмотрим следующие 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; 
}

Чего мне не хватает? Я проверил журналы релизов, но не смог найти ничего полезного. Кроме того, мне интересно, является ли это изменение подлинным, почему оно имеет только незначительное изменение версии? Разве это не должен быть основной выпуск?

Кроме того, Какая у меня альтернатива? Должен ли я использовать Интерполяция ?

Answer 1

Просто используйте интерполяцию строк:

$color-black: #000000;

body {
    --color: #{$color-black};
}

Видимо, старое поведение не предназначено и нарушает языковые спецификации SASS:

• Переменные CSS, смешанные с переменными SCSS, не генерируют правильный CSS в 4.8 +
• Переменные CSS неправильно скомпилированы
• Присвоение переменных SASS переменным CSS (пользовательские свойства) больше не работает

Answer 2

У меня была проблема со старыми версиями sass.

Попытка составить список переменных, поступающих из массива, застрянет с двойной чертой. Вот мое решение на случай, если оно кому-нибудь поможет

$var-element:'--';

:root {
    @each $color in $color-variables {
     #{$var-element}#{nth($color, 1)}: #{nth($color, 2)};   
    }
}

Answer 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;
}