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

查看更多关于Sass流程控制详细介绍的详细内容...