Sass流程控制详细介绍

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中的数组”。