scss for循环

要是实现的效果如下图

1658979356563.png
背景色渐变，iconfont不同
可以使用scsss 的for 循环
字体循环

$fonts:(
          'icon-0':'\e616',
          'icon-1':'\e611',
          'icon-3':'\e74c',
          'icon-2':'\e8e3',
        );
        @each $key,$val in $fonts{
          &.#{$key}{
            &::before{
              font-family: "iconfont";
              content: $val;
            }
          }
        }

背景色循环
···
@mixin scrimGradient(stopColors:('color':red)) {
color:map-values(stopColors);
stopColors);
@if colorStop,stopColors{
map: key: stops: append(stop, comma);
}
}@else{
stops: append(color, comma);
}
background: linear-gradient(stops);
}
i from 1 through 4 {
&:nth-child(#{direction:45deg,map: key: $i));
}
}
···