SCSS 裏的數組及其遍歷

做一個案例，需要這個效果

HTML 結構很簡單，就是一個 ul ，下面 6 個li，每個 li 的背景色不一樣。HTML 結構如下：

<h2 class="titles2">
     考生須知
</h2>
<ul class="ksxz_ul">
     <li><a href="#">報考條件</a></li>
     <li><a href="#">考試時間</a></li>
     <li><a href="#">考試科目</a></li>
     <li><a href="#">考試教材</a></li>
     <li><a href="#">考試費用</a></li>
     <li><a href="#">合格標準</a></li>
</ul>

用傳統CSS來寫：

.ksxz_ul  li:nth-child(1){
   background:#f5ad1b;
}
.ksxz_ul  li:nth-child(1):hover{
   background:#f7bf4c;
}

其他依次類推，相似的樣式一共寫 6 次。。。。好囉嗦。

用 SCSS 來搞定一切~

以下代碼是在 SCSS 中完成：

// 定義數組，數組元素用逗號隔開
$liColor:#f5ad1b,#5f89ce,#94bf45,#da8ec5,#78bfc2,#bec278;

// 開始 @each 循環遍歷數組
// $c 作爲循環變量，代表了數組的元素，不是索引~！！！
@each $c in $liColor{
     $i:index($liColor,$c);        // 獲取 $c 在數組中的索引，並賦值給 $i 賦值用冒號，不是等號~！
     li:nth-child( #{$i} ){      // 經典的地方來了，SCSS 循環是從 1 開始，不是 0 哦~
       background: $c;           // 背景色
       &:hover{
         background: lighten($c,10%);    // hover 後的顏色
       }
     }
}

簡單多了。所以，寫前端的同學們，還是用 SCSS 來寫 CSS 代碼吧。

-----------2020.4.7 補充-----------------

SCSS 裏獲取數組元素的方式：

nth( 數組名，索引 )

比如：索取索引爲1 的元素，SCSS 的數組索引是從1 開始的。

.x{
   background:  nth($liColor,1);
}

-----------2020.4.7 補充 end------------------

關於 SCSS 的安裝和在 webstorm 裏的配置，可以看我的這篇文章  SASS/SCSS環境的安裝，以及webstorm配置SASS/SCSS

關於 SCSS 的更新，可以看這裏  更新sass、scss

更多信息，可以查看官網  https://www.sass.hk/