Использование переменной SCSS внутри определения переменной CSS3 не работает?

Question

Я выясняю, как применить стиль к повторно используемому компоненту Angular из клиентского проекта.См. Theme / style Angular 2 многократно используемые библиотеки компонентов => ищите "продолжение".

Теперь у меня осталась одна проблема:

Я пытаюсь использовать переменную SCSSвнутри CSS-переменной, но эта CSS-переменная, кажется, не определена:

$primary-color: #666666;

// styling reusable components
:root {
  --ang-ux-primary-color: $primary-color;
}

В другом компоненте (в другой библиотеке компонентов, создан отдельно):

$primary-color: var(--ang-ux-primary-color, #5FB0FD);

$ primary-цвет кажется пустым ... не # 666666 и не # 5FB0FD.

Answer 1

Чтобы преобразовать переменную Sass в переменную CSS, вам нужно интерполировать ее :

--ang-ux-primary-color: #{$primary-color};

После того, как вы преобразовали переменную Sass в CSS, ее уже не вернуть.,Следовательно, в вашем другом компоненте вы должны придерживаться чистого CSS.Следующее будет использовать #5FBOFD, если --ang-ux-primary-color не определено.

--ang-ux-primary-color: var(--ang-ux-primary-color, #5FB0FD);