9、流程控制
Sass作为一门编程式的语言,也有属于自己的一套流程控制语法。
(1)@if语句;
(2)@for循环;
(3)@while循环;
(4)@each循环;
一、@if语句
在Sass中,我们可以使用“@if语句”来进行条件选择判断。Sass的条件选择语句共有3种:
(1)@if…(单向选择);
(2)@if…@else…(双向选择);
(3)@if…@else if…(多向选择);
二、@for循环
在Sass中,我们可以使用“@for”来实现循环操作。其中,Sass中的@for循环有2种方式。
语法:
代码语言:javascript复制方式1:@for $i from 开始值 through 结束值
方式2:@for $i from 开始值 to 结束值
说明:
这2种方式是相似的,唯一的区别是:方式1包括结束值,方式2不包括结束值。其中“开始值”和“结束值”都是正整数。
三、@while循环
在Sass中,我们也可以使用@while语句来实现循环操作。跟JavaScript一样,@while语句既是循环语句,也是条件判断语句。
语法:
代码语言:javascript复制@while(判断条件)
{
执行语句;
}
说明:
在Sass中,没有类似于JavaScript的“do...while...”这种语句。这一点小伙伴们要注意一下。
四、@each循环
除了@for以及@while这2种循环方式之外,Sass还为我们提供了另外一种循环方式:each循环。Sass中的each循环跟jQuery中的each循环很相似,大家对比一下。
语法:
代码语言:javascript复制@each $var in 列表值
{
……
}
说明:
$var是一个变量,也可以根据后面列表值表示的内容需要写成$item、$color等。列表值,是Sass中的一种数据类型,可以称之为“Sass中的数组”。