本节咱们学习 Sass 中的循环语句,Sass 中的循环语句能够使用 @for
指令和 @while
指令来实现。css
@for指令
@for
指令能够用于循环生成样式,@for
指令有两种类型,以下所示:学习
// 第一种 @for $i from <start> through <end> // 第二种 @for $i from <start> to <end>
其中 $i
表示变量,start
表示起始值,end
表示结束值。其实这两种方式的区别就在于,使用关键字 through
时会包括 end
这个数,而使用关键字 to
则不会包括 end
这个数。字体
示例:
以下代码,使用 through
关键字实现 @for
循环:.net
@for $i from 1 through 3{ .width#{$i} { width: $i * 10px; } }
编译成 CSS 代码:code
.width1 { width: 10px; } .width2 { width: 20px; } .width3 { width: 30px; }
上述代码中,循环一共循环了三次,从 $i
的值为 1 开始循环,一直到 3 结束,而且包括了 3。ip
示例:
而后咱们再来看一下 to
关键字的使用:get
@for $i from 1 to 3{ .width#{$i} { width: $i * 10px; } }
编译后的 CSS 代码:scss
.width1 { width: 10px; } .width2 { width: 20px; }
和 through
关键字不一样,to
关键字的循环虽然也是从 $i
的值为 1 开始循环,可是不包括 3 ,因此整个循环只循环两遍。编译
@while指令
@while
指令也能够用于循环样式,后面接 SassScript 表达式,循环会一直到表达式的值为 false
时中止。class
示例:
循环遍历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个值,一直到列表中的值遍历完后,循环才会中止。