Карты SASS: можно ли экспортировать содержимое как свойства CSS?

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

Вот мой код, который выдает ошибку

background-color: #020633, color:b7bced Недопустимое значение CSS

Я уверен, что мне нужно заменить запятую точкой с запятой, я просто не уверен, смогу ли я и правильно ли я это сделаю.

$base-color: #0a104e;

@function darkest-color($darkest-base-color-bg) {
    //figure the backgound
    $darkest-bg-color: scale-color($darkest-base-color-bg, $saturation: 66%, $lightness: -40%, $alpha: 100%);
    //figure the text
    $darkest-text-color-nocontrast: scale-color($darkest-base-color-bg, $saturation: 66%, $lightness: 40%, $alpha: 100%);
    //figure the contrast between the background and the text
    $darkest-text-color: color_adjust_contrast_AERT($darkest-text-color-nocontrast, $darkest-base-color-bg);
    //add the two colors to a map
    $darkest-color: '';
    @return $darkest-color (background-color: $darkest-bg-color, color:$darkest-text-color, );
}

.darkest-accent-strip {
    content: darkest-color($base-color);
}

css sass sass-maps
person blur    schedule 01.12.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

$base-color: #0a104e;

@mixin darkest-color($darkest-base-color-bg) {
    $darkest-bg-color: scale-color($darkest-base-color-bg, $saturation: 66%, $lightness: -40%, $alpha: 100%);
    $darkest-text-color-nocontrast: scale-color($darkest-base-color-bg, $saturation: 66%, $lightness: 40%, $alpha: 100%);
    $darkest-text-color: color_adjust_contrast_AERT($darkest-text-color-nocontrast, $darkest-base-color-bg);

    background-color: $darkest-bg-color;
    color: $darkest-text-color;
}

.darkest-accent-strip {
    @include darkest-color($base-color);
}
person Sarsa Murmu    schedule 01.12.2019
comment
Спасибо. Я думал, что я иду об этом неправильным путем. Теперь, когда я думаю об этом и вижу это в коде, это имеет больше смысла, чем использование функции. - person blur; 01.12.2019