本文共 1563 字,大约阅读时间需要 5 分钟。
本节我们学习 Sass 中的循环语句,Sass 中的循环语句可以使用 @for 指令和 @while 指令来实现。
@for 指令可以用于循环生成样式,@for 指令有两种类型,如下所示:
// 第一种@for $i fromthrough // 第二种@for $i from to
其中 $i 表示变量,start 表示起始值,end 表示结束值。其实这两种方式的区别就在于,使用关键字 through 时会包括 end 这个数,而使用关键字 to 则不会包括 end 这个数。
如下代码,使用 through 关键字实现 @for 循环:
@for $i from 1 through 3{ .width#{$i} { width: $i * 10px; }}
编译成 css 代码:
.width1 { width: 10px;}.width2 { width: 20px;}.width3 { width: 30px;}
上述代码中,循环一共循环了三次,从 $i 的值为 1 开始循环,一直到 3 结束,并且包括了 3。
然后我们再来看一下 to 关键字的使用:
@for $i from 1 to 3{ .width#{$i} { width: $i * 10px; }}
编译后的 css 代码:
.width1 { width: 10px;}.width2 { width: 20px;}
和 through 关键字不同,to 关键字的循环虽然也是从 $i 的值为 1 开始循环,但是不包括 3 ,所以整个循环只循环两遍。
@while 指令也可以用于循环样式,后面接 SassScript 表达式,循环会一直到表达式的值为 false 时停止。
循环遍历12px、14px、16px 的字体样式:
$num: 12;@while $num < 18 { .f-#{$num} { font-size: #{$num}px; } $num: $num + 2;}
编译成 CSS 代码:
.f-12 { font-size: 12px;}.f-14 { font-size: 14px;}.f-16 { font-size: 16px;}
变量 $num 的初始值为 12,首先会输出 font-size:12px 样式,然后每次循环都会在原有的基础上加 2,一直到 不满足 $num < 18 这个条件,则循环会停止执行。
@each 指令可以用于遍历一个列表,然后从列表中取出对应的值。
语法:
@each $i in
$i 就是一个变量名,<list> 是一个 SassScript 表达式,返回一个列表值。
$list: 5 10 15 20 25;@each $i in $list { .p-#{$i}{ padding: #{$i}px; }}
编译成 CSS 代码:
.p-5 { padding: 5px;}.p-10 { padding: 10px;}.p-15 { padding: 15px;}.p-20 { padding: 20px;}.p-25 { padding: 25px;}
可以看到上述代码中,我们遍历了定义好的 $list 中的5个值,一直到列表中的值遍历完后,循环才会停止。
学习更多技能
请点击下方公众号
转载地址:http://qgbpi.baihongyu.com/