Невозможно применить прозрачность к: переменной цвета хоста

Question

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

У меня есть глобальная переменная цвета в: host of app.component.scss --primary-color-in-host: rgba(38, 50, 56, 0.9)

Я хочу использовать эту переменную цвета в моем приложении в различных компонентах, и в состоянии сделать это успешно, используя: var(--primary-color-in-host).

Нет проблем там. Однако я также хотел бы иногда применять непрозрачность к этому цвету. Вот где возникает проблема.

Обычно, если вы локально объявляете переменную в s css $primary-color-local: rgba(38, 50, 56, 0.9) компонента, вы можете успешно применить непрозрачность к переменной следующим образом: color:rgba($primary-color-local, .5). Но поскольку я объявил переменную глобально в: host (см. Выше), , непрозрачность не применяется, когда я пытаюсь применить ее, используя rgba(var(--primary-color-in-host), .5). Я просто получаю цвет, но не прозрачность!

Естественно, я мог бы просто повторно объявить этот цвет в .s css каждого компонента, но хотел бы избежать этого (по очевидным причинам). Но прежде чем я смогу заняться проблемой, мне нужно понять, что происходит под поверхностью. Почему он работает локально, а не при получении цвета с: host?

Answer 1

У меня есть глобальная переменная в :host

Вы имели в виду :root или шаблон * :host?

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

SASS не касается собственных CSS переменных, они вычисляются динамически во время выполнения. Движок браузера не имеет представления о том, что вы пытаетесь сделать, когда он вычисляет ваше пользовательское свойство в rgba(rgba(38, 50, 56, 0.9), .5).

Этот ответ более подробно описывает, как вы можете его решить.