Передать значения Dynami c в S CSS Файл в Angular 6

Question

Я использую S CSS в своем коде для стилизации, и теперь у меня есть сценарий, в котором я должен передать значения Dynami c в файл S CSS

$primary-colors: ( 50 : #e8f5f6, 300 : #77c2cb, 500 : #5ab5c0,

$primary-selected-color: darken( map-get($primary-colors, 500), 8% );

Вместо фиксированных цветов нужно установить динамические c цвета. Итак, я сделал что-то вроде этого

$primary-colors: ( 50 : var(--color1), 300 : var(--color1), 500 : var(--color1),

и изменил значение атрибута основано на выбранном цвете, но когда я написал что-то вроде этого, здесь возникает ошибка времени компиляции $primary-selected-color: darken( map-get($primary-colors, 500), 8% ); с указанием Как я могу решить эту проблему или есть какой-нибудь эффективный способ добиться этого путем передачи значения динамически из машинописного файла

Answer 1

Вы могли бы написать функцию, которая возвращает карту $primary-colors с цветом, который вы передаете из файлов .s css.

@function get-map($color) {
    @return (
        50: $color
        300: $color,
        500: $color
    )
}

Это то, что вы ищете?

Единственный способ изменить стили с помощью JS / TS - это добавить классы / атрибуты или css в js

Answer 2

S CSS компилируется в CSS. Он не может быть динамически изменен событиями или действиями, использующими ваш компонент, потому что он просто css во время выполнения.