用预处理语言sass中的 @for @if 整活
/**文字 & 背景 & 边框颜色*/ $color-list:#F04055 #989898; $color-name-list : red gray lightgray;
@each $name in $color-name-list {
$i: index($color-name-list, $name);
.text-#{$name} {
color: nth($color-list, $i);
}
.bg-#{$name} {
background-color:nth($color-list, $i);
}
}
先使用each循环$color-name-list数组;
使用index函数获取$name的下标;
nth
函数可以直接访问数组中的某一项;
然而使用bg-lightgray就会出问题。
解决方式:
1.可以在$color-list中添加对应的颜色值
2.可以使用@if
使用@if解决
/**文字 & 背景 & 边框颜色*/ $color-list:#F04055 #989898 #ededed #80848f #FFFFFF #f90 #5cadff #19be6b #1ab394 #000000; $color-name-list : red gray default deepGray white orange blue success primary black lightgray; @each $name in $color-name-list { @if #{$name}==lightgray { .bg-#{$name} { background: rgba(253, 253, 253, .95); } } @else { $i: index($color-name-list, $name); .text-#{$name} { color: nth( $color-list, $i); } .bg-#{$name} { background-color: nth($color-list, $i); } .border-#{$name} { border-color: nth($color-list, $i); } } }