如何解决您可以从 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 举报,一经查实,本站将立刻删除。