本节我们学习 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