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

我来评几句
登录后评论

已发表评论数()