本节咱们学习 Sass 中的循环语句,Sass 中的循环语句能够应用 @for
指令和 @while
指令来实现。
@for 指令
@for
指令能够用于循环生成款式,@for
指令有两种类型,如下所示:
// 第一种
@for $i from <start> through <end>
// 第二种
@for $i from <start> to <end>
其中 $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 指令
@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
指令能够用于遍历一个列表,而后从列表中取出对应的值。
语法:
@each $i in <list>
$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 个值,始终到列表中的值遍历完后,循环才会进行。