sass中 @each in 循环添加不同的样式

这几天的项目中给循环的项添加不同的渐变背景，sass的循环好久没用，突然有点生疏了，还是记录一下以备不时之需,避免下次也到处翻找.

我使用的是第一种方法 @each多重分配与映射：比较推荐

效果图：

# scss-@each指令 ：

直接上代码：

• 这是组件中的循环列表：这里数组navbtnarr中 的id 分别是 0, 1, 2, 循环出来的类名分别是： a0 a1 a2

<view class="navbtn">
    <view @click="btn(item.id)"  :class="'a'+item.id" v-for="item in navbtnarr" :key="item.id">
        <image class="image3" :src="item.src" mode=""></image>
        <view >{{item.text}}</view>
    </view>
</view>

• 这是scss-style样式:

.navbtn{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 32rpx;
    cursor: pointer;
    @include color-divs;  // 使用是写在父级里面的
	.image3{
         width: 48rpx;
         height: 48rpx;
	}
	view{
         font-size: 36rpx;
         color: #fff;
	}
}

• 这是公共样式：

$colors:(    //注意这里是括号
    0:linear-gradient(rgb(251, 54, 54), rgb(252, 200, 189)),  //颜色渐变
    1:linear-gradient(rgb(252, 183, 44), rgb(252, 207, 178)),
    2:linear-gradient(rgb(14, 130, 254), rgb(193, 223, 251)),
);

@mixin color-divs{    //使用 @include color-divs; 放在下面类名的父级的样式里
    @each $key , $color in $colors {     //注意这里有个逗号（当然不使用逗号也是可以的）
      .a#{$key} {        //拼接变量后的类名分别是 a0, a1, a2,
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width:216rpx;
        height: 140rpx;
        background: $color;  //背景颜色
        border-radius: 20rpx;
      }
    }
  }

编译后的css结果为：

.a0 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width:216rpx;
        height: 140rpx;
        background:linear-gradient(rgb(251, 54, 54), rgb(252, 200, 189));  
        border-radius: 20rpx; 
  }

.a1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width:216rpx;
        height: 140rpx;
        background:linear-gradient(rgb(252, 183, 44), rgb(252, 207, 178)); 
        border-radius: 20rpx; 
  }

.a2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width:216rpx;
        height: 140rpx;
        background: linear-gradient(rgb(14, 130, 254), rgb(193, 223, 251));  
        border-radius: 20rpx; 
  }

第二种方法（没有逗号的） @each指令实例： （这种方法可以更改的样式太少）

公共样式这样写：

@mixin color-divs{    
  @each $color in red, green, yellow, {
    .a#{$color} {    
      background-color: #{$color};
    }
  }
}

或者这样写：
$list:(red, green, yellow);
@mixin color-divs{    
  @each $color in $list {
    .a#{$color} {    
      background-color: #{$color};
    }
  }
}

编译后的css结果为：

.ared {
  background-color: red; }

.agreen {
  background-color: green; }

.ayellow {
  background-color: yellow; }

这里也要循环列表来使用的话，列表每一项的类名也得拼接：这里数组navbtnarr中 的 id 分别就是颜色名字了：red ,green ,yellow

<view class="navbtn">
    <view @click="btn(item.id)"  :class="'a'+item.id" v-for="item in navbtnarr" :key="item.id">
        <image class="image3" :src="item.src" mode=""></image>
        <view >{{item.text}}</view>
    </view>
</view>

第三种方法 @each多重分配 ： 比较推荐 可运用于多个样式不同

公共样式这样写：

@mixin color-divs{ 
  @each $color, $border,$radus in (red, solid,50px),
                                   (green, double,30px),
                                   (yellow, dotted,20px){
    .a#{$color} {
      background-color : $color;
      border: $border;
      border-radius: $radus;  
          ......    //这里还可以不断的添加属性样式
    }
  }
}

编译后的css结果为：

.ared {
  background-color :red;
      border: solid;
      border-radius: 50px;
      }

.agreen {
  background-color : green;
      border: double;
      border-radius: 30px; 
  }

.ayellow {
  background-color : yellow;
      border:dotted;
      border-radius: 20px; 
  }