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;

}

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

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

SASS - 为什么这个mixin不包括在内？

1 个答案: