您可以从 SCSS 变量列表中创建 SCSS 映射吗？如果是这样，如何？

问题描述

您能否从 SCSS 变量 列表中创建一个 SCSS 映射？如果是这样，如何？

目标：

我需要使用从cooler.co 复制的颜色输入我的SCSS 十六进制值映射。导出时，我得到颜色变量，而不是简单的十六进制值（从在线调色板生成器导出时，这似乎是常态）。

Cooler.co 是一个允许调色板测试和导出的 Web 门户，它为您提供颜色变量列表，而不仅仅是给您颜色十六进制值。我想从这个在线调色板生成器的颜色变量列表中复制一部分，并提供一个 SCSS 地图；创建用于输出一些 CSS 类（即时复制和粘贴）并快速查看结果以在我的网页设计中测试不同的颜色组合。

SCSS 颜色变量 在 SCSS 地图 中不清楚，因为我的地图由十六进制值 列表组成。可能需要在这里学习一些东西。绝对对其他方法开放，包括 JS、jQuery 或任何可能有用的东西。

>>codepen example of what I have so far<<

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 输出：

.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;}

结果：

.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>

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）