Can you create an SCSS map from a list of SCSS variables? If so, how?
OBJECTIVE:
I need to feed my SCSS map of hex values with colors copied from cooler.co. Upon export I get color variables as opposed to simple hex values (seems to be the norm when exporting from online color palette generators).
Cooler.co is a web portal that allows color palette testing and exporting, which provides you with a list of color variables, as opposed to just giving you color hex values. I would like to copy a part from a list of color variables from this online color palette generator, and feed an SCSS map; created to output some CSS classes (copying and pasting on the fly) and seeing results quickly to test different color combinations on my web design.
SCSS color variables in an SCSS map is unclear because my map is made of a list of hex values. Probably need to learn something here. Definitely open to other methods including JS, jQuery, or anything that might be useful.
HTML:
<div class="textcolor1 backgroundcolor5">TEXT COLOR ONE - BACKGROUND FIVE</div>
<div class="textcolor2 backgroundcolor4">TEXT COLOR TWO - BACKGROUND FOUR</div>
<div class="textcolor3 backgroundcolor2">TEXT COLOR THREE - BACKGROUND TWO</div>
<div class="textcolor3 backgroundcolor2">TEXT COLOR THREE - BACKGROUND TWO</div>
<div class="textcolor5 backgroundcolor1">TEXT COLOR FIVE - BACKGROUND ONE</div>
SCSS:
$numbers: (
"1",
"2",
"3",
"4",
"5"
);
/* I would like to paste the list of colors into the list
bellow, but upon export you get a list of -color variables-
my SCSS map is made of -hex values- ..not sure how to achieve this.
What is the correct way of achieving a switchable palette? */
$color-map: (
#264653ff,
#2a9d8fff,
#e9c46aff,
#f4a261ff,
#e76f51ff
);
$ziplist: zip($numbers, $color-map);
@each $number, $color in $ziplist {
.backgroundcolor#{$number}{
background-color: $color;
}
}
@each $number, $color in $ziplist {
.textcolor#{$number}{
color: $color;
}
}
CSS OUTPUT:
.backgroundcolor1 { background-color: #264653ff;}
.backgroundcolor2 { background-color: #2a9d8fff;}
.backgroundcolor3 { background-color: #e9c46aff;}
.backgroundcolor4 { background-color: #f4a261ff;}
.backgroundcolor5 { background-color: #e76f51ff;}
.textcolor1 { color: #264653ff;}
.textcolor2 { color: #2a9d8fff;}
.textcolor3 { color: #e9c46aff;}
.textcolor4 { color: #f4a261ff;}
.textcolor5 { color: #e76f51ff;}
RESULT:
.backgroundcolor1 { background-color: #264653ff;}
.backgroundcolor2 { background-color: #2a9d8fff;}
.backgroundcolor3 { background-color: #e9c46aff;}
.backgroundcolor4 { background-color: #f4a261ff;}
.backgroundcolor5 { background-color: #e76f51ff;}
.textcolor1 { color: #264653ff;}
.textcolor2 { color: #2a9d8fff;}
.textcolor3 { color: #e9c46aff;}
.textcolor4 { color: #f4a261ff;}
.textcolor5 { color: #e76f51ff;}<div class="textcolor1 backgroundcolor5">TEXT COLOR ONE - BACKGROUND FIVE</div>
<div class="textcolor2 backgroundcolor4">TEXT COLOR TWO - BACKGROUND FOUR</div>
<div class="textcolor4 backgroundcolor3">TEXT COLOR FOUR - BACKGROUND THREE</div>
<div class="textcolor3 backgroundcolor2">TEXT COLOR THREE - BACKGROUND TWO</div>
<div class="textcolor5 backgroundcolor1">TEXT COLOR FIVE - BACKGROUND ONE</div>