scss兩層數組遍歷（遍歷生成多個圖標，不同的樣式）

$iconFont: (
              (font: "\e6bb", bgc: $bgOrange, sdc: $bgOrangeFourPercent),
              (font: "\e601", bgc: $bgBlue, sdc: $bgBlueFourPercent),
              (font: "\e61a", bgc: $bgGreen, sdc: $bgGreenFourPercent),
              (font: "\e74e", bgc: $bgCyan, sdc: $bgCyanFourPercent),
              (font: "\e648", bgc: $bgViolet, sdc: $bgVioletFourPercent),
              (font: "\e67b", bgc: $bgBlue, sdc: $bgBlueFourPercent),
              (font: "\e62e", bgc: $bgGreen, sdc: $bgGreenFourPercent),
              (font: "\e63e", bgc: $bgCyan, sdc: $bgCyanFourPercent),
              (font: "\e61d", bgc: $bgViolet, sdc: $bgVioletFourPercent),
      );
      @for $i from 1 through length($iconFont) {
        $item: nth($iconFont, $i);

        &:nth-child(#{$i}) > a:before {
          content: map-get($item, font);
          background-color: map-get($item, bgc);
          @include box-shadow(0 $size5 $size10 0 map-get($item, sdc));
        }
      }

生成後的css

.commonly-used .used-content .col-xs-2:nth-child(1) > a:before {
    content: "";
    background-color: #e6ab4a;
    -webkit-box-shadow: 0 5px 10px 0 rgba(245, 166, 35, 0.4);
    -moz-box-shadow: 0 5px 10px 0 rgba(245, 166, 35, 0.4);
    box-shadow: 0 5px 10px 0 rgba(245, 166, 35, 0.4);
}

.commonly-used .used-content .col-xs-2:nth-child(2) > a:before {
    content: "";
    background-color: #71a6f1;
    -webkit-box-shadow: 0 5px 10px 0 rgba(66, 117, 188, 0.4);
    -moz-box-shadow: 0 5px 10px 0 rgba(66, 117, 188, 0.4);
    box-shadow: 0 5px 10px 0 rgba(66, 117, 188, 0.4);
}

.commonly-used .used-content .col-xs-2:nth-child(3) > a:before {
    content: "";
    background-color: #48af5b;
    -webkit-box-shadow: 0 5px 10px 0 rgba(126, 211, 33, 0.4);
    -moz-box-shadow: 0 5px 10px 0 rgba(126, 211, 33, 0.4);
    box-shadow: 0 5px 10px 0 rgba(126, 211, 33, 0.4);
}

.commonly-used .used-content .col-xs-2:nth-child(4) > a:before {
    content: "";
    background-color: #50e3c2;
    -webkit-box-shadow: 0 5px 10px 0 rgba(80, 227, 194, 0.4);
    -moz-box-shadow: 0 5px 10px 0 rgba(80, 227, 194, 0.4);
    box-shadow: 0 5px 10px 0 rgba(80, 227, 194, 0.4);
}

.commonly-used .used-content .col-xs-2:nth-child(5) > a:before {
    content: "";
    background-color: #af7ec4;
    -webkit-box-shadow: 0 5px 10px 0 rgba(190, 117, 255, 0.4);
    -moz-box-shadow: 0 5px 10px 0 rgba(190, 117, 255, 0.4);
    box-shadow: 0 5px 10px 0 rgba(190, 117, 255, 0.4);
}

.commonly-used .used-content .col-xs-2:nth-child(6) > a:before {
    content: "";
    background-color: #71a6f1;
    -webkit-box-shadow: 0 5px 10px 0 rgba(66, 117, 188, 0.4);
    -moz-box-shadow: 0 5px 10px 0 rgba(66, 117, 188, 0.4);
    box-shadow: 0 5px 10px 0 rgba(66, 117, 188, 0.4);
}

.commonly-used .used-content .col-xs-2:nth-child(7) > a:before {
    content: "";
    background-color: #48af5b;
    -webkit-box-shadow: 0 5px 10px 0 rgba(126, 211, 33, 0.4);
    -moz-box-shadow: 0 5px 10px 0 rgba(126, 211, 33, 0.4);
    box-shadow: 0 5px 10px 0 rgba(126, 211, 33, 0.4);
}

.commonly-used .used-content .col-xs-2:nth-child(8) > a:before {
    content: "";
    background-color: #50e3c2;
    -webkit-box-shadow: 0 5px 10px 0 rgba(80, 227, 194, 0.4);
    -moz-box-shadow: 0 5px 10px 0 rgba(80, 227, 194, 0.4);
    box-shadow: 0 5px 10px 0 rgba(80, 227, 194, 0.4);
}

.commonly-used .used-content .col-xs-2:nth-child(9) > a:before {
    content: "";
    background-color: #af7ec4;
    -webkit-box-shadow: 0 5px 10px 0 rgba(190, 117, 255, 0.4);
    -moz-box-shadow: 0 5px 10px 0 rgba(190, 117, 255, 0.4);
    box-shadow: 0 5px 10px 0 rgba(190, 117, 255, 0.4);
}

效果如下：