SASS 地图：我可以将内容导出为 CSS 属性吗？

Question

我正在尝试找到从函数输出多个颜色值的最有效方法。该函数（最终）采用基色并使用 sass 函数输出配色方案（考虑互补、三级、单色等）。

这是我产生错误的代码

background-color: #020633, color:b7bced Isn't a valid CSS value

我确定我需要用分号替换逗号，我只是不确定我是否可以，或者我是否正在处理这个问题。

$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);
}

Answer 1

您不能将函数导出为属性，但您可以使用 mixin 来实现您想要的。您可以阅读有关 Sass Mixins 的更多信息。在这里我做了你想要的

$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);
}

SASS 地图：我可以将内容导出为 CSS 属性吗？

SASS Maps: Can I export the contents as CSS properties?

css

sass

sass-maps