流程控制

2022-05-15 08:37:23 浏览数 (1)

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

0 人点赞