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循环在$r中使用时red从10更改为.someclass，但是（{1}}幸运的是，它没有。这表明循环在其自己的本地范围内工作，但它仍然访问全局$test变量，即使不使用!global标志。

现在我很困惑。 mixin的docs状态具有局部范围，但我还没有找到有关for循环范围的任何文档。这是＆＃34; hybrid＆＃34;确定一个记录的特征 - 循环计数器在某个局部范围内，而循环＆＃34; body＆＃34;在父作用域中工作 - 或者它是SCSS编译器中的错误吗？

Answer 1

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

循环中Sass的变量范围

1 个答案: