SCSS循环遍历数组

1.问题背景

　　在项目中需要实现下面这样的tab列表效果。每一项都有不同的颜色样式，用css写七个样式的话非常的麻烦~

2.解决方法

　　用SCSS的变量和循环方法可以非常简单的实现效果，非常的方便~，

　　代码：

//结构
<div class="bottomNav">
　　<div class="item" v-for="(item,i) in bottomNav" :key="i" :class="['item_'+(i+1),item.isActive?'active':'']">
　　　　<i class="iconfont" :class="item.icont"></i>{{item.name}}
　　</div>
</div>

//SCSS
$icon-color: #00fdfb, #ffd200, #fb5911, #2cf698, #5da6fb, #d75efb, #9fff10;　　//定义数组变量，数组元素用逗号隔开
@for $i from 1 through length($icon-color) {　　//@for $i from 开始值 through 结束值 包含结束值  （SCSS 循环是从1开始的~）
　　$item: nth($icon-color, $i); //获取数组$i对应的下标值 即颜色值
　　.item_#{$i} {
　　　　background: rgba($color: $item, $alpha: 0.15);
　　　　border: 1px solid $item;
　　　　color: $item;
　　}
　　.active {
　　　　border-width: 2px;
　　　　font-weight: bold;
　　}
}

3.SCSS循环语法

　　SCSS中循环方法有for循环和each循环，记录下语法~

1.for循环：语法

方式1：@for $i from 开始值 through 结束值 包含结束值
方式2：@for $i from 开始值 to 结束值 不包含结束值

@for $i from 1 through 3{
  .padding-left#{2 * $i + 8}{
    padding-left: 2 * $i + 8 + px;
  }
}

@for $i from 1 to 3{
  .margin-left#{2 * $i + 8}{
    margin-left: 2 * $i + 8 + px;
  }
}

/**最终编译结果*/
.padding-left10 { padding-left: 10px; }
.padding-left12 { padding-left: 12px; }
.padding-left14 { padding-left: 14px; }

.margin-left10 { margin-left: 10px; }
.margin-left12 { margin-left: 12px; }

2.each循环数组：语法

定义数组: $arrayName: a,b,c...;

循环数组: @each $item in $arrayName

在循环里边得到数组索引： index($arrayName，$item)

$pixelArr: 5, 15;
$position: top, right, bottom, left;
@each $item in $pixelArr {
  $index: index($pixelArr, $item); /**可得到循环的索引*/
  .margin-#{$item} {
    margin: $item + px;
    border-width: $index + px;
  }
  @each $p in $position{
    .margin-#{$p}-#{$item}{
      margin-#{$p}: $item + px;
    }
  }
}

/**最终编译结果*/
.margin-5 {
  margin: 5px;
  border-width: 1px; }

.margin-top-5 {
  margin-top: 5px; }

.margin-right-5 {
  margin-right: 5px; }

.margin-bottom-5 {
  margin-bottom: 5px; }

.margin-left-5 {
  margin-left: 5px; }

.margin-15 {
  margin: 15px;
  border-width: 2px; }

.margin-top-15 {
  margin-top: 15px; }

.margin-right-15 {
  margin-right: 15px; }

.margin-bottom-15 {
  margin-bottom: 15px; }

.margin-left-15 {
  margin-left: 15px; }