巧用SASS之如何遍歷n個子元素併爲其設置屬性

最近在新項目中引入了 SASS 來編寫樣式代碼,心想既然用到了這種高端貨,就要用得巧用得妙,不能單純地只是把經常使用屬性定義成變量或定義重用的代碼塊等等。所以在編寫樣式時,都要時刻提醒本身是否是能夠巧用SASS來解決一些問題。html

此次遇到的需求是,<ul></ul> 裏有7個重複的 <li></li> ,這7個 <li></li> 須要應用7中不一樣顏色的 background-color ,需求很簡單,以下是簡易的效果圖。數組

clipboard.png

針對這個需求,有許多種實現方式,包括傳統的CSS寫法和咱們今天要講的使用SASS的編寫方法,具體以下:sass

HTML結構爲:app

<div id="main-container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</div>

1. 傳統CSS實現

最簡單的固然是爲每個 <li></li> 都加一個用於區分不一樣 background-color 的類, 每一個類裏應用上不一樣的背景顏色就OK啦,這咱們不必多說了。函數

2. 使用SASS多值變量: list

list 類型有點像js中的數組。list數據可經過空格,逗號或小括號分隔多個值,可用 nth($var,$index) 取值。關於list數據操做還有不少其餘函數如 length($list)join($list1,$list2,[$separator])append($list,$value,[$separator]) 等,具體可參考sass Functions(List Functions)。spa

本需求實現代碼以下:3d

// 將背景顏色值定義成變量
$red : #FF0000;
$orange : #FFA500;
$yellow : #FFFF00;
$green : #008000;
$bluegreen : #00FFFF;
$blue : #0000FF;
$purple : #800080;

// 定義一個list儲存背景顏色
$bgcolorlist: $red $orange $yellow $green $bluegreen $blue $purple;

// 使用SASS for循環語句爲每個li設置background-color
@for $i from 1 to length($bgcolorlist)+1 {
    #main-container ul li:nth-child(#{$i}) {
        background-color: nth($bgcolorlist,$i);
    }
}

這裏須要注意的幾點是:code

  • from後的數值,即循環開始的i值不能爲0,這是語法規定的。htm

  • for循環從 i = 1 開始,但並非在 i = length($bgcolorlist) 時結束,咱們原本是須要循環7次,但若是咱們寫成 to length($bgcolorlist) 的話,只會循環6次,所以是 to length($bgcolorlist)+1對象

3. 使用SASS多值變量: map

固然,解決這個需求,咱們也可使用 SASS 中的 map 。map類型有點像js中的對象。map數據以key和value成對出現,其中value又能夠是list。格式爲: $map: (key1: value1, key2: value2, key3: value3); 。可經過 map-get($map,$key) 取值。關於map數據還有不少其餘函數如 map-merge($map1,$map2)map-keys($map)map-values($map) 等,具體可參考sass Functions(Map Functions)。

本需求實現代碼以下:

// 將背景顏色值定義成變量
$red : #FF0000;
$orange : #FFA500;
$yellow : #FFFF00;
$green : #008000;
$bluegreen : #00FFFF;
$blue : #0000FF;
$purple : #800080;

//將背景顏色以鍵值對的形式存在map中
$bgcolorlist : (
    1: $red,
    2: $orange,
    3: $yellow,
    4: $green,
    5: $bluegreen,
    6: $blue,
    7: $purple);

// 使用SASS each語法爲每個li設置background-color
@each $i, $color in $bgcolorlist {
    #main-container ul li:nth-child(#{$i}) {
        background-color: $color;
    }
}

是否是很簡單呢~其實這種方法本質上和使用list的方式是同樣的。

OK,就這麼多吧,固然這個小需求的實現方式遠不止這些,選一種本身喜歡的就好啦,都so easy~

相關文章
相關標籤/搜索