SASS:如何使用循环生成地图 [英] SASS : How to generate a map using a loop
问题描述
我的目标是生成一个SASS map 来存储存储在以下映射中的颜色的变体:
My goal is to generate a SASS map to store variants of colors that are stored in the following map:
$colors : (
jet : #333333,
wintergreen-dream : #588C73,
eton-blue : #8FC0A9,
sunglow : #FFC33C,
light-kaki : #F2E394,
bege : #FAF3DD
);
到目前为止，我正在使用 @function 来检索这些变体:
So far, I am using a @function to retrieve these variants:
@function light ($color, $val) { @return lighten($color, $val); }
@function dark ($color, $val) { @return darken($color, $val); }
@function transparent ($color, $val) { @return transparent($color, $val); }
我希望能够生成的地图如下所示:
The map I am expecting to be able to generate would look alike the following:
$colors-map : (
eton-blue : (
base : $eton-blue,
light : lighten($eton-blue, 15%),
dark : darken($eton-blue, 15%),
trans : transparent($eton-blue, .5)
),
jet : (
base : $jet,
light : lighten($jet, 15%),
dark : darken($jet, 15%),
trans : transparent($jet, .5)
)
// ...
);
但是，我已经尝试应用的循环看起来像这样:
Yet, the loop I've already tried to apply, looks like this:
@for $key, $value in $colors {}
但是，我很天真地相信它可以在地图本身内部工作.
However, I was naive to believe it could work inside of the map itself.
哪些问题的答案可以更轻松地回答此疑问:
- 如何向SASS映射(函数)(键:值)添加值?
-
map-merge/map-set的基本用法?(@return map-merge($ map，$ new))
- How to add values to a SASS map (function), (key:value) ?
- Basic usage of
map-merge/map-set? (@return map-merge($map, $new))
严格来说，我在下面寻找的东西:
Strictly what I am looking for below :
$alternative-colors : (
@each $color, $hex in $colors {
#{$color} : (
light : lighten($color, 25%),
dark : darken($color, 25%)
);
}
);
但是，它返回以下错误:
But yet, it returns following error:
Error: Invalid CSS after \"...tive-colors : (\": expected \")\", was \"@each (...)
结论
很长一段时间过去了，如果能与其他所有人分享我的解决方案，那将是很好的事情.
Long time have passed, and I it would be nice if I could share my solution with everyone else.
我创建了一个仓库来存储此问题解决的结果， https://github.com/vladimirlisovets/SASS-Color-Palettes .
I have created a repo to store the results of this problem solving, https://github.com/vladimirlisovets/SASS-Color-Palettes.
希望它对某人有用，可以激发一些更好的东西.
Hope it to be useful to someone either to inspire for something better.
干杯.
推荐答案
$colors : (
jet : #333333,
wintergreen-dream : #588C73,
eton-blue : #8FC0A9,
sunglow : #FFC33C,
light-kaki : #F2E394,
bege : #FAF3DD
);
$colors-map: ();
@function create_colour_map($color, $percentage, $opacity) {
$map: (
base: $color,
light: lighten($color, $percentage),
dark: darken($color, $percentage),
trans: transparentize($color, $opacity)
);
@return $map;
}
@each $key, $value in $colors {
$map: ();
$map: map-merge($map, ($key: create_colour_map($value, 15%, 0.5)) );
$colors-map: map-merge($colors-map, $map);
}
@debug $colors-map; //prints out the map below
(jet: (base: #333333,
light: #595959,
dark: #0d0d0d,
trans: rgba(51, 51, 51, 0.5)),
wintergreen-dream: (base: #588C73,
light: #81b099,
dark: #3a5d4c,
trans: rgba(88, 140, 115, 0.5)),
eton-blue: (base: #8FC0A9,
light: #c0dccf,
dark: #5ea483,
trans: rgba(143, 192, 169, 0.5)),
sunglow: (base: #FFC33C,
light: #ffdb89,
dark: #efa500,
trans: rgba(255, 195, 60, 0.5)),
light-kaki: (base: #F2E394,
light: #faf5d8,
dark: #ead150,
trans: rgba(242, 227, 148, 0.5)),
bege: (base: #FAF3DD,
light: white,
dark: #f0db9a,
trans: rgba(250, 243, 221, 0.5)))
我将您的三个函数合并为一个，即 create_colour_map 函数.它为 colour ， percentage 和 opacity 使用三个参数.该函数返回一个 map
I merged your three functions into one, the create_colour_map function. It takes three arguments for the colour, percentage and opacity. The function returns a map
使用这些参数调用 create_colour_map(#333333，15％，0.5)会返回 map
Calling the create_colour_map(#333333, 15%, 0.5) with those args returns a map
(base: #333333,
light: #595959,
dark: #0d0d0d,
trans: rgba(51, 51, 51, 0.5)
);
我只是遍历 $ colors 映射，每次调用该函数时都会生成一个映射，该映射在每次迭代时都会成为键的值.
I just loop through the $colors map and each time call the function which generates a map that becomes the value of the key each time for an iteration.
如何向地图添加值以及map-merge的基本用法?
我使用 map-merge 将值添加到 map .顾名思义，它将两个映射连接在一起，并且由于它是一个函数，因此可以在Sass需要 value 的地方使用.因此，以下面的代码为例
I use map-merge to add values to a map. Just as the name implies, it joins two maps together and since it is a function, it can be used where Sass expects a value. So take for example the code below
$map: ( colour: red);
$new_map: (class: blue);
如果我们希望 $ map 具有与两个地图相同的键和值，我们可以编写
If we wanted $map to have the same keys and values as both maps, we could write
$map: map-merge( $map, $new_map); // $map: (colour: red, class: blue)
这基本上是说函数的 return 值(这将是两个映射在一起)是 $ map
This is basically saying the return value of the function ( which would be the two maps joined together ) is the value of $map
只需简单地将这行代码视为编程语言中的 变量重新分配 即可.这样便可以使用 map-merge 设置地图中的值. map-merge 方法的第二个参数不必是预定义的地图变量.可能是这样写的
Simply put just think of that line of code as variable reassignment in programming languages. This is how you can use map-merge to set values in maps. The 2nd argument for the map-merge method doesn't need to be a predefined map variable. It could have been written this way
$map: map-merge( $map, (class: blue) );
所以在这里看起来就像您在 $ map 变量
So here it just looks like you're adding a new key and value to the $map variable
这篇关于SASS:如何使用循环生成地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
