css - SASS - 为什么不包含此 mixin？

Question

我是 SASS 的新手，所以如果这看起来很明显，请多多包涵。

我有一些测试 SASS 代码:

$background : "yellow";
$color : "green";

%my-placeholder { 

  background: $background;
  color: $color;

}

@mixin my-mixin($background,$color) {

  %my-placeholder { 

    background: $background;
    color: $color;

  }

}

.my-class {

  /* Why does this 'my-mixin()' NOT get included to the class? */
  @include my-mixin($background,$color);
  color: blue;

}

它是变量、占位符和混合的组合，输出:

.my-class {
  /* Why does this 'my-mixin()' NOT get included to the class? */
  color: blue;
}

如您所见，mixin 的@include 包含覆盖占位符的调用，但未在 .my-class 选择中使用。这是为什么？

我有一个 SASS-meister，你可以在其中实时看到: http://sassmeister.com/gist/8015459

这是正常行为吗？为了使用此功能，我是否缺少依赖项？

谢谢!

Answer 1

它被包括在内，但您只是没有调用它。 % 是一个占位符选择器，因此您需要在调用 mixin 后 @extend %my-placeholder。这仍然会以您可能没有预料到的结果结束。

.my-class {
  color: blue;
}
.my-class .my-class {
  background: "yellow";
  color: "green";
}

我认为使用简单的 mixin 可能会更好，因为您需要切换变量。

@mixin my-mixin( $background: #ccc, $color: #000 ){
  background: $background;
  color: $color;
}

.my-class {
  @include my-mixin( red, green );
}

此外，您似乎认为在选择器内定义的变量会使其成为本地变量，但事实并非如此。在我学习的过程中，它确实让我陷入了困境。

$color: red;

.foo {
  $color: blue;
  color: $color; // $color is blue...
}

.bar {
  color: $color; // $color is still blue, not red...
}