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;
  }
}

DEMO

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

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

这样您就可以在迭代的每一步上覆盖$x。但另外你可以使用Sass＆＃39; if() function并执行以下操作：

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

DEMO

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

在这两种情况下，$x仅定义@for指令的in the scope，您无法从外部访问它（因此它是本地变量）。但请记住，任何具有相同名称的全局变量都将被覆盖。