流程控制

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种方式。

语法：

方式1：@for $i from 开始值 through 结束值

方式2：@for $i from 开始值 to 结束值

说明：

这2种方式是相似的，唯一的区别是：方式1包括结束值，方式2不包括结束值。其中“开始值”和“结束值”都是正整数。

三、@while循环

在Sass中，我们也可以使用@while语句来实现循环操作。跟JavaScript一样，@while语句既是循环语句，也是条件判断语句。

语法：

@while(判断条件)

{

    执行语句;

}

说明：

在Sass中，没有类似于JavaScript的“do...while...”这种语句。这一点小伙伴们要注意一下。

四、@each循环

除了@for以及@while这2种循环方式之外，Sass还为我们提供了另外一种循环方式：each循环。Sass中的each循环跟jQuery中的each循环很相似，大家对比一下。

语法：

@each $var in 列表值

{

    ……

}

说明：

$var是一个变量，也可以根据后面列表值表示的内容需要写成$item、$color等。列表值，是Sass中的一种数据类型，可以称之为“Sass中的数组”。