SASS mixins中的可变范围

Question

我正试图将我的大脑包裹在这个周围，希望这里有人可以启发我。我以此代码为例：

@mixin stuffs() {
  color: $color;
}

$color: #000;

.single {
  $color: white;
  @include stuffs();
}

我希望.single范围内的$ color会覆盖全局$ color值，但事实并非如此。有人可以解释原因吗？我在这里缺少什么？

Answer 1

好的 - 让我们看看我是否可以使用您提供的示例来解决这个问题。

@mixin stuffs() {
  color: $color;
}

$color: #000;

.single {
  $color: white;
  @include stuffs();
}

您期望 .color 的局部变量版本（即白色）将显示在 .single 选择器中，而不是黑色。

但是你需要将 .single 的本地范围与mixin stuffs 的本地范围分开。它们不是同一件事。您仍然需要在 .single 选择器中“使用” $ color （即白色）的局部变量版本，如下所示：

@mixin stuffs() {
    color:$color;
}

$color:#000;

main
{
    $color:white;
    @include stuffs();
    color:$color;
}

如果我错过了一些内容，请告诉我，并查看http://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498了解有关范围的更多信息。