Sass for 循环中的变量范围

Question

在我的一个 SCSS 脚本中，我发现我不小心给了一个 @for 循环计数器与不同的全局变量同名，但一切仍然按预期工作。

例如，将此示例脚本粘贴到http://sassmeister.com/：

$w: white;
$r: red;
$b: blue;
$y: yellow;

//...

$test: '';
//Accidentally using an existing variable name ($r) as the counter:
@for $r from 1 through 10 {
  @if($test != '') { $test: $test + ', '; }
  $test: $test + $r;
}

.someclass {
  /*Note: $r is 'red', not the @for counter. @for loops create their own scope?*/
  color: $r;
  /*All the @for counters. @for created a *local* $r, but accessed the *global* $test...*/
  something: unquote($test);
}

...CSS 将如下所示：

.someclass {
  /*Note: $r is 'red', not the @for counter. @for loops create their own scope?*/
  color: red;
  /*All the @for counters. @for created a *local* $r, but accessed the *global* $test...*/
  something: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
}

所以，我原以为 @for 循环在 .someclass 中使用时将 $r 从 red 更改为 10，但（幸运的是）它没有。这表明循环在其自己的本地范围内工作，但它仍然访问全局 $test 变量，即使没有使用 !global 标志。

现在我很困惑。 docs 声明 mixins 具有本地范围，但我还没有找到任何有关 for 循环范围的文档。 这个“混合”范围是文档化的特性——循环计数器在某个本地范围内，而循环“主体”在父范围内工作——还是 SCSS 编译器中的错误？ p>

Answer 1

我不认为这是编译器中的错误，因为我认为这是 @for 循环的预期行为，但你是正确的，它不是 documented。我会 submit a request 澄清/添加到官方文档中。