巧用SASS之如何遍历n个子元素并为其设置属性

最近在新项目中引入了 SASS 来编写样式代码，心想既然用到了这种高端货，就要用得巧用得妙，不能单纯地只是把常用属性定义成变量或定义重用的代码块等等。因此在编写样式时，都要时刻提醒自己是不是可以巧用SASS来解决一些问题。

这次遇到的需求是，<ul></ul> 里有7个重复的 <li></li> ，这7个 <li></li> 需要应用7中不同颜色的 background-color ，需求很简单，如下是简易的效果图。

针对这个需求，有许多种实现方式，包括传统的CSS写法和我们今天要讲的使用SASS的编写方法，具体如下：

HTML结构为：

<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）。

本需求实现代码如下：

// 将背景颜色值定义成变量
$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);
    }
}

这里需要注意的几点是：

• from后的数值，即循环开始的i值不能为0，这是语法规定的。

• 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~