I'm trying to dynamically create my color palettes from a set of base colors using SASS. I was previously creating each base color manually by first defining a set of color variables, then creating a map of each base color with various shades. Then every color map was put into a palette map.
Then to return a color/shade I would use a function which retrieved the value from the color map within the palette map.
It was so long winded, not to mention annoying whenever I wanted to add another color, so I wanted to try and do this dynamically but I seem to be having a bit of trouble with creating a map using a variable name, as far as I can tell.
Here is my previous code just to give you an idea of what I was doing:
$color-percent-change: 3%;
$color-blue: hsla(196, 85%, 57%, 1);
$color-brown: hsla(15, 40%, 33%, 1);
$color-charcoal: hsla(0, 0%, 23%, 1);
$blue: (
'lighten-3': lighten($color-blue, ($color-percent-change * 3)),
'lighten-2': lighten($color-blue, ($color-percent-change * 2)),
'lighten-1': lighten($color-blue, ($color-percent-change * 1)),
'base': $color-blue,
'darken-1': darken($color-blue, ($color-percent-change * 1)),
'darken-2': darken($color-blue, ($color-percent-change * 2)),
'darken-3': darken($color-blue, ($color-percent-change * 3))
);
$brown: (
'lighten-3': lighten($color-brown, ($color-percent-change * 3)),
'lighten-2': lighten($color-brown, ($color-percent-change * 2)),
'lighten-1': lighten($color-brown, ($color-percent-change * 1)),
'base': $color-brown,
'darken-1': darken($color-brown, ($color-percent-change * 1)),
'darken-2': darken($color-brown, ($color-percent-change * 2)),
'darken-3': darken($color-brown, ($color-percent-change * 3))
);
$charcoal: (
'lighten-3': lighten($color-charcoal, ($color-percent-change * 3)),
'lighten-2': lighten($color-charcoal, ($color-percent-change * 2)),
'lighten-1': lighten($color-charcoal, ($color-percent-change * 1)),
'base': $color-charcoal,
'darken-1': darken($color-charcoal, ($color-percent-change * 1)),
'darken-2': darken($color-charcoal, ($color-percent-change * 2)),
'darken-3': darken($color-charcoal, ($color-percent-change * 3))
);
$palette: (
'blue': $blue,
'brown': $brown,
'charcoal': $charcoal,
);
@function color($color, $type: 'base') {
@if map-has-key($palette, $color) {
$current: map-get($palette, $color);
@if map-has-key($current, $type) {
@return map-get($current, $type);
}
}
@warn 'Unknown #{$color} - #{$type} in #{$palette}.';
@return null;
}
.blue {
color: color('blue', 'lighten-2');
}
So now I'm creating a colors map with each color name/value, then looping through each key in the map and dynamically creating the base colors shade palette and using a similar function to return the color value, but I'm getting the error:
argument `$map` of `map-has-key($map, $key)` must be a map
Here is the new code:
$color-percent-change: 3%;
$colors: (
'brand': hsla(265, 35%, 50%, 1),
'black': hsla(0, 0%, 0%, 1),
'blue': hsla(196, 85%, 57%, 1),
'brown': hsla(15, 40%, 33%, 1),
'charcoal': hsla(0, 0%, 23%, 1),
'emerald': hsla(140, 52%, 55%, 1),
'green': hsla(101, 55%, 60%, 1),
'grey': hsla(0, 0%, 47%, 1),
'indigo': hsla(225, 57%, 47%, 1),
'orange': hsla(34, 100%, 53%, 1),
'pink': hsla(309, 80%, 70%, 1),
'purple': hsla(285, 67%, 60%, 1),
'red': hsla(11, 85%, 57%, 1),
'silver': hsla(0, 0%, 80%, 1),
'slate': hsla(210, 20%, 33%, 1),
'teal': hsla(180, 100%, 24%, 1),
'white': hsla(0, 100%, 100%, 1),
'yellow': hsla(55, 100%, 57%, 1),
);
@each $name, $color in $colors {
$name: (
'lighten-10': lighten($color, ($color-percent-change * 10)),
'lighten-9': lighten($color, ($color-percent-change * 9)),
'lighten-8': lighten($color, ($color-percent-change * 8)),
'lighten-7': lighten($color, ($color-percent-change * 7)),
'lighten-6': lighten($color, ($color-percent-change * 6)),
'lighten-5': lighten($color, ($color-percent-change * 5)),
'lighten-4': lighten($color, ($color-percent-change * 4)),
'lighten-3': lighten($color, ($color-percent-change * 3)),
'lighten-2': lighten($color, ($color-percent-change * 2)),
'lighten-1': lighten($color, ($color-percent-change * 1)),
'base': $color,
'darken-1': darken($color, ($color-percent-change * 1)),
'darken-2': darken($color, ($color-percent-change * 2)),
'darken-3': darken($color, ($color-percent-change * 3)),
'darken-4': darken($color, ($color-percent-change * 4)),
'darken-5': darken($color, ($color-percent-change * 5)),
'darken-6': darken($color, ($color-percent-change * 6)),
'darken-7': darken($color, ($color-percent-change * 7)),
'darken-8': darken($color, ($color-percent-change * 8)),
'darken-9': darken($color, ($color-percent-change * 9)),
'darken-10': darken($color, ($color-percent-change * 10))
);
}
@function color($color, $type: 'base') {
@if map-has-key($color, $type) {
@return map-get($color, $type);
}
@warn 'Unknown #{$color} - #{$type} in #{$color}.';
@return null;
}
.red {
color: color('red', 'lighten-2');
}
I think that the @each loop defining $name as a variable name is causing a problem as it's not recognizing it as a SASS map? But I'm not completely sure, usually my SASS files are pretty simple, this is the first time I've really gone further than just using simple variables and functions with it, so I'm probably missing something relatively straight forward?
You need to merge a generated a generated list of colors to a main list using the color name as the key map, instead of generate a variable by interpolation:
You can see the working example here.
Hope it helps.