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

2016-07-12 22:04:00

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

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

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

HTML结构为：

        1. 1        1. 2        1. 3        1. 4        1. 5        1. 6        1. 7

1. 传统CSS实现

最简单的当然是为每一个 1. 都加一个用于区分不同 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~

关键字：css, sass, map, list

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！