SCSS如何定义动态样式
下面是我当前发生编译错误的代码SCSS如何定义动态样式,css,sass,Css,Sass,下面是我当前发生编译错误的代码 $color-1: #353a4b; $color-2: #5563a9; $color-3: #7184e7; $color-4: #c788e6; $color-5: #f76789; @for $i from 1 through 5 { .bg-color-#{$i} { background-color: $color-#{$i}; } .fg-color-#{$i} { color: $color-#{$i}; } }
$color-1: #353a4b;
$color-2: #5563a9;
$color-3: #7184e7;
$color-4: #c788e6;
$color-5: #f76789;
@for $i from 1 through 5 {
.bg-color-#{$i} {
background-color: $color-#{$i};
}
.fg-color-#{$i} {
color: $color-#{$i};
}
}
这给了我以下的错误
SassError: Undefined variable: "$color-".
我想使用sass@for定义动态样式
.bg-color-1 {
background-color: $color-1;
}
.bg-color-2 {
background-color: $color-2;
}
...
有人能帮我吗?
提前感谢一个合适的解决方案是
映射变量
,然后使用@each
循环访问它们
一个合适的解决方案是映射变量
,然后使用@each
循环访问它们
酷。太快了!酷。太快了!
$colors: (
color-1: #353a4b,
color-2: #5563a9,
color-3: #7184e7,
color-4: #c788e6,
color-5: #f76789,
);
@each $color in $colors {
$index: index($colors, $color);
$color: nth($color, 2);
.bg-color-#{$index} {
background-color: $color;
}
.fg-color-#{$index} {
color: $color;
}
}