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

#sass #node-sass #css-variables #sass-loader

#sass #узел-sass #css-переменные #sass-загрузчик

Вопрос:

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

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

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

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

1. Вы где-нибудь объявляли цвет $color ?

2. Можете ли вы предоставить код, который вызывает ошибку?

3. lighten это собственная функция sass, $color — это просто имя первого параметра. Код является: color: lighten(var(--textColor), 10%)

4. Очевидно, что Sass не может обрабатывать переменные CSS; но что плохого в использовании переменных Sass?

5. В принципе, вы не можете использовать функцию sass после компиляции, я полагаю, что ваше требование — изменить цвет с Angular. Лучше всего использовать переменные CSS, проверьте следующую статью, вы могли бы получить подсказку. medium.com/@amcdnl /…

Ответ №1:

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

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

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

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

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

1. github.com/sass/libsass/issues/2561 некоторые из них уже были реализованы, я думаю

2. @DanR. даже если разработчики SASS смогут реализовать это правильно, это будет работать только с такими функциями CSS, как rgb() , rgba() , hsl() и hsla() , но не с любой другой функцией SASS, такой как lighten() или darken() .

Ответ №2:

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

1. Действительно, но вопрос заключается в использовании переменных CSS в Sass

2. Я знаю это, но это не моя цель. Переменные CSS более последовательны и ими можно манипулировать в JS, в отличие от SCSS cars.

Ответ №3:

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