scss遍历数组，渲染多个class

假设：我们有这样一组颜色

$arrColor:yellow,green,blue,black,red,white,gray;

然后遍历造class

@each $color in $arrColor {
  .col#{$color}{
    color:$color;
  }
  .bg#{$color}{
    background-color:$color;
    border-color:$color;
  }
}

效果如图，省了一把代码，改起来也方便，只要你喜欢还能造更多，何乐而不为！

但是如果要指定的是颜色值而非这种English，我们可以定义对象，然后遍历

将数组改为对象数组

$arrColor:(
  (name: 'Yellow', val: #f0ad4e),
  (name: 'Green', val: #1aad19),
  (name: 'Blue', val: #4e9ef0),
  (name: 'Black', val: #333333),
  (name: 'Red', val: #dd524d),
  (name: 'White', val: #ffffff),
  (name: 'Gray', val: #adadad),
);

用for遍历

@for $i from 1 through length($arrColor) {
	$item: nth($arrColor, $i);
	.col#{map-get($item, name)}{
		color:map-get($item, val);
	}
	.bg#{map-get($item, name)}{
		background-color:map-get($item, val);
		border-color:map-get($item, val) ;
	}
}