SASS mixins中的可变范围

时间:2016-01-22 03:49:46

标签: sass mixins

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

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

$color: #000;

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

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

1 个答案:

答案 0 :(得分:0)

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

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