csssasssass-maps

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


I am trying to find the most efficient way to output multiple color values from a function. The function (will eventually) take the base color and output a color scheme using sass functions (think complementary, tertiary, monochromatic, etc...).

Here is my code that produces the error

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

I'm sure that I need to replace the comma with a semicolon, I'm just not sure if I can or if I'm going about this properly.

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

Solution

  • You cannot export function as properties, but you can use mixins to achieve what you want. You can read more about Sass Mixins. Here I did what you wanted

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