我的目标是生成一个 SASSmap
来存储存储在以下地图中的颜色变体:
$colors : (
jet : #333333,
wintergreen-dream : #588C73,
eton-blue : #8FC0A9,
sunglow : #FFC33C,
light-kaki : #F2E394,
bege : #FAF3DD
);
到目前为止,我正在使用 a@function
来检索这些变体:
@function light ($color, $val) { @return lighten($color, $val); }
@function dark ($color, $val) { @return darken($color, $val); }
@function transparent ($color, $val) { @return transparent($color, $val); }
我期望能够生成的地图如下所示:
$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)
)
// ...
);
然而,我已经尝试应用的循环看起来像这样:
@for $key, $value in $colors {}
然而,我天真地相信它可以在地图本身内部工作。
可以更容易回答这个疑问的问题:
- 如何将值添加到 SASS 映射(函数),(键:值)?
map-merge
/map-set
的基本用法 (@return map-merge($map, $new)
)
严格地说,我在下面寻找:
$alternative-colors : (
@each $color, $hex in $colors {
#{$color} : (
light : lighten($color, 25%),
dark : darken($color, 25%)
);
}
);
但是,它返回以下错误:
Error: Invalid CSS after \"...tive-colors : (\": expected \")\", was \"@each (...)
结论
很长一段时间过去了,如果我能与其他人分享我的解决方案,我会很好。
我创建了一个存储库来存储此问题解决的结果,https://github.com/vladimirlisovets/SASS-Color-Palettes。
希望它对某人有用,可以激发更好的东西。
干杯。