css - SASS - 我可以在 for 循环中定义变量吗？

Question

$x: 100%;
@for $i from 1 through 5 {
  .item-#{$i} {
    width: $x;
    $x: $x - 10;
  }
}

我可以将 $x 定义为 100% 这样它就不是全局的（如果我可以这么说的话）并在循环中使用它进行计算？把它作为一个论点可能吗？或者它必须是一个函数？

Answer 1

您可以完全基于$i变量并在每一步计算它（不使用递归）。可能是这样的：

@for $i from 1 through 5 {
  $x: 110% - $i * 10;
  .item-#{$i} {
    width: $x;
  }
}

演示

但是（如果你的实际情况并不比这个例子复杂得多）你也不需要一个单独的变量，只需这样做：

@for $i from 1 through 5 {
  .item-#{$i} {
    width: 110% - $i * 10;
  }
}

这样你$x在迭代的每一步都会覆盖你的。但或者，您可以使用 Sass 的if()功能并执行以下操作：

@for $i from 1 through 5 {
  $x: if($i < 2, 100%, $x - 10);
  .item-#{$i} {
    width: $x;
  }
}

演示

在第一个迭代步骤中，您定义$x并分配其初始值......然后您可以$x在循环的每个步骤中进行修改并将其传递给下一个步骤。

在这两种情况下$x都只在指令的范围内定义@for，您不能从外部访问它（因此它是一个局部变量）。但请记住，任何具有相同名称的全局变量都会被覆盖。