用预处理语言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);
    }
  }
}