Использование переменных CSS в функциях sass - node-sass

Question

Я пытаюсь использовать CSS-переменные в проекте Angular вместе с функциями Sass (точнее, lighten() / darken()), и, насколько я знаю, последняя версия LibSass позволяет это.

Я установил node-sass@4.11.0 и sass-loader@7.1.0 (и на Angular v7.3.0), но все же я получаю сообщение об ошибке

Аргумент $ color of lighten ($ color, $ amount) должен быть цветом

Я что-то упустил?
Спасибо!

Answer 1

К сожалению, вы не можете ... lighten является функцией SASS во время компиляции, в то время как переменные CSS являются переменными времени выполнения.

Вы можете превратить переменную SASS в переменную CSS, но не наоборот.

В заключение, если вам нужно вызывать функции SASS, просто используйте переменные SASS (в качестве аргументов этих функций).

Больше объяснений от сопровождающего node-sass:
https://github.com/sass/node-sass/issues/2251#issuecomment-372009293

Ожидаемый вывод невозможен, потому что rgba (цвет, альфа) является функцией Sass.
Аргумент color должен иметь тип Sass Color.
Sass не оценивает значения пользовательских свойств css, потому что это переменные времени выполнения.

Answer 2

Sass не позволяет нам использовать переменные css, просто используйте переменную sass и передайте ее функции lighten, поскольку вы знаете, что компилятор sass автоматически преобразует ее в css и управляет автоматически. Я думаю, что это решит вашу проблему $ color или любую переменную для вашего sass и будет использовать ее внутри функции lighten ().

Answer 3

Как насчет использования переменной SASS вместо переменной css. Если вы определили переменную SASS $ color, используйте ее в функции sass lighten, чтобы исправить эту ошибку.