Sass configuration map with default values

Question

I am creating css using SASS and would like to make it possible for another developer to create a custom css by changing sass variables. This works fine when I in my base file use a single variable like this:

$text-color: #000 !default;

To test the override I create a new project where I first declare an override for the variable and then import the "base" sass file.

$text-color: #0074b;    
@import "base-file";

But I would also like to use maps for configuration but then I do not get the override to work. How should I use configuration maps that can be overriden?

$colors: (text-color: #000, icon-color: #ccc );

Adding !default after #000 gives me a compilation error: expected ")", was "!default,") Adding !default after the ) gives no error but the variables does not get overwritten either.

Any ideas on what I am doing wrong?

Answer 1

Bootstrap has solved this issue as:

$grays: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
  (
    "100": $gray-100,
    "200": $gray-200,
    "300": $gray-300,
    "400": $gray-400,
    "500": $gray-500,
    "600": $gray-600,
    "700": $gray-700,
    "800": $gray-800,
    "900": $gray-900
  ),
  $grays
);

https://github.com/twbs/bootstrap/blob/v4.1.3/scss/_variables.scss#L23

Answer 2

The use of default in a map is incorrect.

It is not possible to set the default to a key value but to the entire map. That's why it doesn't work for you.

$colors: (
text-color: #000, 
background-color: #ccc) !default;

enter image description here

As you can see in the first image, step on the default value. In the second image, use the default map when you can't find another

enter image description here

Answer 3

I don't think the functionality you want exists in standard Sass. I built this function though that does what you're asking for:

//A function for filling in a map variable with default values
@function defaultTo($mapVariable: (), $defaultMap){

    //if it's a map, treat each setting in the map seperately
    @if (type-of($defaultMap) == 'map' ){

        $finalParams: $mapVariable;

        // We iterate over each property of the defaultMap
        @each $key, $value in $defaultMap {

            // If the variable map does not have the associative key
            @if (not map-has-key($mapVariable, $key)) {

                // add it to finalParams
                $finalParams: map-merge($finalParams, ($key : $value));

            }
        }

        @return $finalParams;

    //Throw an error message if not a map
    } @else {
        @error 'The defaultTo function only works for Sass maps';
    }
}

Usage:

$map: defaultTo($map, (
    key1 : value1,
    key2 : value2
));

Then if you have a mixin for something, you can do this sort of thing:

@mixin someMixin($settings: ()){
    $settings: defaultTo($settings, (
        background: white,
        text: black
    );
    background: map-get($settings, background);
    color: map-get($settings, text);
}

.element {
    @include someMixin((text: blue));
}

Outputted CSS:

.element { background: white; color: blue; }

So you would use it like this based on what you said in the question:

$colors: defaultTo($colors, (
    text-color: #000,
    icon-color: #ccc,
));