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

zhou_you 发布于2019-08-29 10:58 / 1241人阅读

摘要：最近在新项目中引入了来编写样式代码，心想既然用到了这种高端货，就要用得巧用得妙，不能单纯地只是把常用属性定义成变量或定义重用的代码块等等。数据可通过空格，逗号或小括号分隔多个值，可用取值。

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

这次遇到的需求是，

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

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

HTML结构为：

1. 传统CSS实现

最简单的当然是为每一个

都加一个用于区分不同 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~

私有云混合云属性遍历 jquery遍历元素元素属性遍历json对象属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111342.html

一些可以让你装逼、让人眼前一亮的算法技巧总结

今天和大家讲讲，在做算法题时常用的一些技巧。对于平时没用过这些技巧的人，或许你可以考虑试着去看看在实践中能否用的上这些技巧来优化问题的解，相信一定会让你有所收获，不然你看我。 1. 巧用数组下标数组的下标是一个隐含的很有用的数组，特别是在统计一些数字，或者判断一些整型数是否出现过的时候。例如，给你一串字母，让你判断这些字母出现的次数时，我们就可以把这些字母作为下标，在遍历的时候，如果字母a遍历...

xiaolinbang 2019-05-23 16:26 评论0 收藏0
前端面试题-伪类和伪元素

摘要：四伪类列举状态伪类状态伪类是基于元素当前状态进行选择的。目前，只有火狐浏览器支持伪类，并在火狐浏览器中使用时需要添加前缀试验阶段。一、伪类和伪元素的引入 1. 规范说明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...

Cristic 2019-08-30 14:09 评论0 收藏0
前端面试题-伪类和伪元素

摘要：四伪类列举状态伪类状态伪类是基于元素当前状态进行选择的。目前，只有火狐浏览器支持伪类，并在火狐浏览器中使用时需要添加前缀试验阶段。一、伪类和伪元素的引入 1. 规范说明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...

entner 2019-08-01 18:41 评论0 收藏0
css伪类和伪元素的学习

摘要：发现有很多东西效果其实可以用伪类或者伪元素实现。记录下为什么引入伪类和伪元素引入伪类和伪元素概念是为了格式化文档树以外的信息，也就是说。伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者列表中的第一个元素。最近用js实现一些css效果。发现有很多东西效果其实可以用伪类或者伪元素实现。特地补充下这方面的知识。记录下为什么引入伪类和伪元素 CSS introd...

魏宪会 2019-08-30 14:19 评论0 收藏0
《JavaScript 闯关记》之 DOM（下）

摘要：节点具有以下特征的值为的值为元素的标签名的值为可能是或其子节点可能是或。添加的这些属性分别对应于每个元素中都存在的下列标准特性。，有关元素的附加说明信息，一般通过工具提示条显示出来。 Element 类型除了 Document 类型之外，Element 类型就要算是 Web 编程中最常用的类型了。Element 类型用于表现 XML 或 HTML 元素，提供了对元素标签名、子节点及特...

mudiyouyou 2019-08-20 12:26 评论0 收藏0