Sass循环样式（1）

style

$foods: (
  b: #2D8CF0, 
  g: #19BE6B, 
  y: #FF9900, 
  r: #ED3F14, 
  p: #E46CBB ,
  pr: #9A66E4
); 

@each $name, $color in $foods{
  .i_#{$name}{
    float: left;
    width: 36%;
    text-align: center;
    padding: 40px 0;
    font-size: 30px;
    color: #fff;
    background: $color
  }
}
      

html:

<i class="el-icon-s-custom i_b"></i>
<i class="el-icon-s-custom i_g"></i>
<i class="el-icon-s-custom i_y"></i>
<i class="el-icon-s-custom i_r"></i>
<i class="el-icon-s-custom i_p"></i>
<i class="el-icon-s-custom i_pr"></i>