scss: how to dynamically create variables from array - css

Question

I have this
$colors:
"dark" #3E3E3E,
"darker" #3E3E3E,
"light" #ECECF0,
"green" #00A87B,
"yellow" #FFBB3B,
"red" #FF4633,
"white" #FFFFFF,
"black" #000000,
"blue" #436FB6
;
#each $color in $colors{
// .btn-color
.btn-#{nth($color, 1)}{
background: nth($color, 2);
color: #fff;
}
// .color / color
.#{nth($color, 1)}, #{nth($color, 1)}{
color: nth($color, 2) !important;
a{
color: nth($color, 2);
}
}
// .color-bg
.#{nth($color, 1)}-bg {
background: nth($color, 2);
}
}
It dynamically creates various classes. How can I extend this to make variables for each $colors example — i need to use $dark to reach the dark value from $colors

Answer 1

If you are going to automate color variations I recommend you to take a look into the native color functions provided by Sass (http://sass-lang.com/documentation/Sass/Script/Functions.html).
Here is an example based on a color map (IMO simpler to work with compared to list):
$colors:(
green : #00A87B,
yellow : #FFBB3B,
red : #FF4633,
blue : #436FB6,
white : #FFFFFF,
black : #000000
);
#each $name, $color in $colors {
.color {
&-#{$name}{
background-color: $color;
// create variations (if not black or white)
#if $color != white and $color != black {
&.extra-light { background-color: mix($color, white, 25%); }
&.light { background-color: mix($color, white, 50%); }
&.semi-light { background-color: mix($color, white, 75%); }
&.extra-dark { background-color: mix($color, black, 25%); }
&.dark { background-color: mix($color, black, 50%); }
&.semi-dark { background-color: mix($color, black, 75%); }
}
}
}
}
CSS output
.color-green { background-color: #00A87B;}
.color-green.extra-light { background-color: #bfe9de;}
.color-green.light { background-color: #80d4bd;}
.color-green.semi-light { background-color: #40be9c;}
.color-green.extra-dark { background-color: #002a1f;}
.color-green.dark { background-color: #00543e;}
.color-green.semi-dark { background-color: #007e5c;}
.color-yellow { background-color: #FFBB3B;}
.color-yellow.extra-light { background-color: #ffeece;}
.color-yellow.light { background-color: #ffdd9d;}
.color-yellow.semi-light { background-color: #ffcc6c;}
.color-yellow.extra-dark { background-color: #402f0f;}
.color-yellow.dark { background-color: #805e1e;}
.color-yellow.semi-dark { background-color: #bf8c2c;}
.color-red { background-color: #FF4633;}
.color-red.extra-light { background-color: #ffd1cc;}
.color-red.light { background-color: #ffa399;}
.color-red.semi-light { background-color: #ff7466;}
.color-red.extra-dark { background-color: #40120d;}
.color-red.dark { background-color: #80231a;}
.color-red.semi-dark { background-color: #bf3526;}
.color-blue { background-color: #436FB6;}
.color-blue.extra-light { background-color: #d0dbed;}
.color-blue.light { background-color: #a1b7db;}
.color-blue.semi-light { background-color: #7293c8;}
.color-blue.extra-dark { background-color: #111c2e;}
.color-blue.dark { background-color: #22385b;}
.color-blue.semi-dark { background-color: #325389;}
.color-white { background-color: #FFFFFF;}
.color-black { background-color: #000000;}
Function based approach:
$colors:(
green : #00A87B,
yellow : #FFBB3B,
red : #FF4633,
blue : #436FB6,
white : #FFFFFF,
black : #000000
);
#function get-color($color, $variant: null){
$color: map-get($colors, $color);
#return map-get((
extra-light: mix($color, white, 25%),
light: mix($color, white, 50%),
semi-light: mix($color, white, 75%),
semi-dark: mix($color, black, 75%),
dark: mix($color, black, 50%),
extra-dark: mix($color, black, 25%)
),$variant) or $color;
}
.class { color: get-color(green); }
.class { color: get-color(green, semi-light); }
.class { color: get-color(yellow, dark); }