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

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

Я установил [email protected] и [email protected] (и на Angular v7.3.0), но все же получаю сообщение об ошибке

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

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


sass node-sass sass-loader css-variables
person Dan R.    schedule 24.04.2019    source источник
comment
Вы где-то заявляли цвет $color?   -  person Corné    schedule 24.04.2019
comment
Можете ли вы предоставить код, вызывающий ошибку?   -  person Mr Lister    schedule 24.04.2019
comment
lighten - это собственная функция sass, $ color - это просто имя первого параметра. Код: color: lighten(var(--textColor), 10%)   -  person Dan R.    schedule 24.04.2019
comment
Очевидно, Sass не может обрабатывать переменные CSS; но что плохого в использовании переменных Sass?   -  person Mr Lister    schedule 24.04.2019
comment
Делает тематику приложений более удобной :)   -  person Dan R.    schedule 25.04.2019
comment
Где определяется --textColor?   -  person ᆼᆺᆼ    schedule 30.04.2019
comment
По сути, вы не можете использовать функцию sass после компиляции, я считаю, что вам нужно изменить цвет с Angular. Лучше всего использовать переменные CSS, посмотрите следующую статью, и вы можете получить некоторую подсказку. medium.com/@amcdnl/   -  person Jeyenth    schedule 02.05.2019
comment
На самом деле я уже следую тому же шаблону, что и в статье, но я хочу установить все цветовые переменные, которые в настоящее время используются для пользовательских свойств css - и они уже используются с функциями осветления / затемнения в системе.   -  person Dan R.    schedule 03.05.2019

Ответы (3)


arrow_upward
6
arrow_downward

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

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

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

Дополнительные объяснения от разработчика node-sass:
https://github.com/sass/node-sass/issues/2251#issuecomment-372009293.

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

person Kelvin Lai    schedule 01.05.2019
comment
github.com/sass/libsass/issues/2561 некоторые из них уже были реализованы я Угадай - person Dan R.; 01.05.2019
comment
@DanR. даже если сопровождающие SASS смогут реализовать его правильно, он будет работать только с функциями CSS, такими как rgb(), rgba(), hsl() и hsla(), но не с любыми другими функциями SASS, такими как lighten() или darken(). - person Kelvin Lai; 02.05.2019

arrow_upward
0
arrow_downward

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

person Tek choudhary    schedule 30.04.2019
comment
Действительно, но вопрос заключается в использовании переменных CSS в Sass. - person ᆼᆺᆼ; 30.04.2019
comment
Я знаю это, но это не моя цель. Вары CSS более согласованы и ими можно манипулировать в JS, в отличие от автомобилей SCSS. - person Dan R.; 01.05.2019

arrow_upward
0
arrow_downward

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

person Pranil Tunga    schedule 01.05.2019