SASS @for 和 @while 规则

@for 规则用于从一个数字向上或向下计数到另一个数字，并检查给定范围之间的每个数字的部分。每个数字都分配了一个给定的变量名称。为了排除最后一个数字，使用to和为了包括它，使用通过。

句法：

@for  from  to  {
    ... 
}

和

@for  from  through  {
    ... 
}

例子：

$gfg: green;
  
@for $i from 1 through 5 {
  ul:nth-child(2n + #{$i}) {
    background-color: darken($gfg, $i * 5%);
  }
}

输出：

ul:nth-child(2n+1) {
  background-color: #006700;
}

ul:nth-child(2n+2) {
  background-color: #004d00;
}

ul:nth-child(2n+3) {
  background-color: #003400;
}

ul:nth-child(2n+4) {
  background-color: #001a00;
}

ul:nth-child(2n+5) {
  background-color: #000100;
}

@while 规则仅在给定的表达式为真时才分析该部分。该部分继续编译，直到它返回 false，然后该部分停止编译。

句法：

@while  { 
    ... 
}

例子：

@function scale-below($value, $base, $ratio: 2) {
  @while $value > $base {
    $value: $value / $ratio;
  }
  @return $value;
}
  
$normal-font-size: 22px;
gfg {
  font-size: scale-below(20px, 12px);
}

输出：

gfg {
  font-size: 10px;
}

真假：其他一些值也可以在任何地方使用，真假是允许的。值 false 和 null 意味着 Sass 认为它们显示错误并导致条件失败。每个其他值都是真的。所以 Sass 认为他们在条件下成功。一些语言考虑了更多的错误值，而不仅仅是 false 和 null，在该列表中不包括 Sass。空字符串、空列表和数字 0 在 Sass 中都被认为是真理。