Css SASS-为什么不包括此混合？

我是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;

}

它是变量、占位符和mixin的组合，输出：

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

正如您所看到的，mixin的@include（包含覆盖占位符的调用）没有在.my类选择中使用。为什么会这样

我有一个SASS meister，你可以现场看到：

这是正常的行为吗？使用此功能时是否缺少依赖项

---

谢谢

它正在被包括在内，但你只是不打电话给它

%

是一个占位符选择器，因此在调用mixin后，您需要扩展%my占位符。这仍然会导致一些你可能没有预料到的事情

.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...
}

---

兄弟，

%

也代表什么？@VivekVikranth实际上，在Sass的未来版本中，选择器中定义的变量将具有不同的范围。在Sass 3.3（beta版）下编译最后一段示例代码时，您将收到一条关于覆盖/使用全局变量的弃用警告。不过，范围行为的改变要到3.4才会发生。我喜欢这种声音，尽管我很少发现自己这样做。