SASS mixins中的变量范围[重复]答案

【问题标题】：Variable scope in SASS mixins [duplicate]SASS mixins中的变量范围[重复]
【发布时间】：2016-01-22 03:49:45
【问题描述】：

我正在努力思考这个问题，希望这里有人能启发我。我以这段代码为例：

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

$color: #000;

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

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

【问题讨论】：

标签： sass mixins

【解决方案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 了解有关范围的更多信息。

【讨论】：