关于sass:Sass-循环语句

本节咱们学习 Sass 中的循环语句，Sass 中的循环语句能够应用 @for 指令和 @while 指令来实现。

@for指令

@for 指令能够用于循环生成款式，@for 指令有两种类型，如下所示：

// 第一种
@for $i from <start> through <end>
    
// 第二种
@for $i from <start> to <end>

其中 $i 示意变量，start 示意起始值，end 示意完结值。其实这两种形式的区别就在于，应用关键字 through 时会包含 end 这个数，而应用关键字 to 则不会包含 end 这个数。

示例：

如下代码，应用 through 关键字实现 @for 循环：

@for $i from 1 through 3{
    .width#{$i} {
        width: $i * 10px; 
    }
}

编译成 CSS 代码：

.width1 {
  width: 10px;
}

.width2 {
  width: 20px;
}

.width3 {
  width: 30px;
}

上述代码中，循环一共循环了三次，从 $i 的值为 1 开始循环，始终到 3 完结，并且包含了 3。

示例：

而后咱们再来看一下 to 关键字的应用：

@for $i from 1 to 3{
    .width#{$i} {
        width: $i * 10px; 
    }
}

编译后的 CSS 代码：

.width1 {
  width: 10px;
}

.width2 {
  width: 20px;
}

和 through 关键字不同，to 关键字的循环尽管也是从 $i 的值为 1 开始循环，然而不包含 3 ，所以整个循环只循环两遍。

@while指令

@while 指令也能够用于循环款式，前面接 SassScript 表达式，循环会始终到表达式的值为 false 时进行。

示例：

循环遍历12px、14px、16px 的字体款式：

$num: 12;

@while $num < 18 {
    .f-#{$num} { 
        font-size: #{$num}px; 
      }
    $num: $num + 2;
}

编译成 CSS 代码：

.f-12 {
  font-size: 12px;
}

.f-14 {
  font-size: 14px;
}

.f-16 {
  font-size: 16px;
}

变量 $num 的初始值为 12，首先会输入 font-size:12px 款式，而后每次循环都会在原有的根底上加 2，始终到 不满足 $num < 18 这个条件，则循环会进行执行。

@each 指令

@each 指令能够用于遍历一个列表，而后从列表中取出对应的值。

语法：

@each $i in <list>

$i 就是一个变量名，<list> 是一个 SassScript 表达式，返回一个列表值。

示例：

$list: 5 10 15 20 25;

@each $i in $list {
    .p-#{$i}{
        padding: #{$i}px;
    }
}

编译成 CSS 代码：

.p-5 {
  padding: 5px;
}

.p-10 {
  padding: 10px;
}

.p-15 {
  padding: 15px;
}

.p-20 {
  padding: 20px;
}

.p-25 {
  padding: 25px;
}

能够看到上述代码中，咱们遍历了定义好的 $list 中的5个值，始终到列表中的值遍历完后，循环才会进行。