摘要:最近在新项目中引入了来编写样式代码,心想既然用到了这种高端货,就要用得巧用得妙,不能单纯地只是把常用属性定义成变量或定义重用的代码块等等。数据可通过空格,逗号或小括号分隔多个值,可用取值。
最近在新项目中引入了 SASS 来编写样式代码,心想既然用到了这种高端货,就要用得巧用得妙,不能单纯地只是把常用属性定义成变量或定义重用的代码块等等。因此在编写样式时,都要时刻提醒自己是不是可以巧用SASS来解决一些问题。
这次遇到的需求是,
针对这个需求,有许多种实现方式,包括传统的CSS写法和我们今天要讲的使用SASS的编写方法,具体如下:
HTML结构为:
</>复制代码
-
- 1
-
- 2
-
- 3
-
- 4
-
- 5
-
- 6
-
- 7
-
1. 传统CSS实现
最简单的当然是为每一个
都加一个用于区分不同 background-color 的类, 每个类里应用上不同的背景颜色就OK啦,这我们没必要多说了。 2. 使用SASS多值变量: listlist 类型有点像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~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111342.html
今天和大家讲讲,在做算法题时常用的一些技巧。对于平时没用过这些技巧的人,或许你可以考虑试着去看看在实践中能否用的上这些技巧来优化问题的解,相信一定会让你有所收获,不然你看我。 1. 巧用数组下标 数组的下标是一个隐含的很有用的数组,特别是在统计一些数字,或者判断一些整型数是否出现过的时候。例如,给你一串字母,让你判断这些字母出现的次数时,我们就可以把这些字母作为下标,在遍历的时候,如果字母a遍历...
摘要:四伪类列举状态伪类状态伪类是基于元素当前状态进行选择的。目前,只有火狐浏览器支持伪类,并在火狐浏览器中使用时需要添加前缀试验阶段。 一、伪类和伪元素的引入 1. 规范说明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...
摘要:四伪类列举状态伪类状态伪类是基于元素当前状态进行选择的。目前,只有火狐浏览器支持伪类,并在火狐浏览器中使用时需要添加前缀试验阶段。 一、伪类和伪元素的引入 1. 规范说明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...
摘要:发现有很多东西效果其实可以用伪类或者伪元素实现。记录下为什么引入伪类和伪元素引入伪类和伪元素概念是为了格式化文档树以外的信息,也就是说。伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者列表中的第一个元素。 最近用js实现一些css效果。发现有很多东西效果其实可以用伪类或者伪元素实现。特地补充下这方面的知识。 记录下 为什么引入伪类和伪元素 CSS introd...
摘要:节点具有以下特征的值为的值为元素的标签名的值为可能是或其子节点可能是或。添加的这些属性分别对应于每个元素中都存在的下列标准特性。,有关元素的附加说明信息,一般通过工具提示条显示出来。 Element 类型 除了 Document 类型之外,Element 类型就要算是 Web 编程中最常用的类型了。Element 类型用于表现 XML 或 HTML 元素,提供了对元素标签名、子节点及特...
阅读 3249·2021-11-11 11:00
阅读 2568·2019-08-29 11:23
阅读 1450·2019-08-29 10:58
阅读 2327·2019-08-29 10:58
阅读 2958·2019-08-23 18:26
阅读 2511·2019-08-23 18:18
阅读 2045·2019-08-23 16:53
阅读 3417·2019-08-23 13:13