For loop Sass循环和变量
我知道你不能用文本插入变量名,这很不幸。但是我在我的scss文件中看到了这个巨大的块,我想知道是否有任何方法可以用for循环来缩短它For loop Sass循环和变量,for-loop,sass,For Loop,Sass,我知道你不能用文本插入变量名,这很不幸。但是我在我的scss文件中看到了这个巨大的块,我想知道是否有任何方法可以用for循环来缩短它 #chord1 { .color1 { color: map-get($chord1, color1); fill: map-get($chord1, color1); } .color2 { color: map-get($chord1, color2); fill: map-g
#chord1 {
.color1 {
color: map-get($chord1, color1);
fill: map-get($chord1, color1);
}
.color2 {
color: map-get($chord1, color2);
fill: map-get($chord1, color2);
}
.color3 {
color: map-get($chord1, color3);
fill: map-get($chord1, color3);
}
.color4 {
color: map-get($chord1, color4);
fill: map-get($chord1, color4);
}
.color5 {
color: map-get($chord1, color5);
fill: map-get($chord1, color5);
}
.color6 {
color: map-get($chord1, color6);
fill: map-get($chord1, color6);
}
}
#chord2 {
.color1 {
color: map-get($chord2, color1);
fill: map-get($chord2, color1);
}
.color2 {
color: map-get($chord2, color2);
fill: map-get($chord2, color2);
}
.color3 {
color: map-get($chord2, color3);
fill: map-get($chord2, color3);
}
.color4 {
color: map-get($chord2, color4);
fill: map-get($chord2, color4);
}
.color5 {
color: map-get($chord2, color5);
fill: map-get($chord2, color5);
}
.color6 {
color: map-get($chord2, color6);
fill: map-get($chord2, color6);
}
}
#chord3 {
.color1 {
color: map-get($chord3, color1);
fill: map-get($chord3, color1);
}
.color2 {
color: map-get($chord3, color2);
fill: map-get($chord3, color2);
}
.color3 {
color: map-get($chord3, color3);
fill: map-get($chord3, color3);
}
.color4 {
color: map-get($chord3, color4);
fill: map-get($chord3, color4);
}
.color5 {
color: map-get($chord3, color5);
fill: map-get($chord3, color5);
}
.color6 {
color: map-get($chord3, color6);
fill: map-get($chord3, color6);
}
}
当我的地图是这样的:
$chord1: (color1:blue, color2: purple, color3: #eee, color4: teal, color5: green, color6: gray);
$chord2: (color1:orange, color2: magenta, color3: gray, color4: yellow,color5: green, color6: gray);
$chord3: (color1:green , color2: blue, color3: gray, color4: blue,color5: green, color6: gray);
如果不是因为变量插值问题,我可以将此SCS简化为两个嵌套的for
循环,如下所示:
$spacers: (xs: 10px,sm: 20px, md: 30px, lg: 40px, xl: 50px);
$directions: (top, bottom);
// usage "spacer-top-sm"
@each $direction in $directions {
@each $spacer, $amt in $spacers {
.spacer-#{$direction}-#{$spacer} {
margin-#{$direction}: $amt;
}
}
}
但是“技巧”在这里似乎不起作用,因为
映射get
需要实际变量。可能有点晚了,但是下面的技巧应该可以做到
/**
* Chord Color Mixin
*
* @access public
*
* @requires {List} $colors - Space Deliminated list of Colors
*
*/
@mixin chord-color($colors) {
$i: 0;
@each $color in $colors {
$i: $i + 1;
.color#{$i} {
color: $color;
fill: $color;
}
}
}
/**
* Chord1
*/
#chord1 {
@include chord-color(blue purple #eee teal green gray);
}
/**
* Chord2
*/
#chord2 {
@include chord-color(orange magenta gray yellow green gray);
}
/**
* Chord3
*/
#chord3 {
@include chord-color(green blue gray blue green gray);
}
在@include
中传递的颜色将按其相关顺序添加。将新颜色添加到末尾将为当前的#和弦创建.color7
列表是按从左到右的顺序排列的。可能是重复的,我看看那边有没有效果。这有点不同。