我是 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
这是正常行为吗?为了使用此功能,我是否缺少依赖项?
谢谢!
最佳答案
它被包括在内,但您只是没有调用它。 %
是一个占位符选择器,因此您需要在调用 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...
}
关于css - SASS - 为什么不包含此 mixin?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20647798/