巧用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~