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; }