css - 来自 Mixins 的 Sass 占位符

Question

我想使用从样式 block 传递的任意值动态创建 Sass 占位符:

@mixin example-mixin($arg) {
    %placeholder-#{$arg} {
        property: $arg;
    }
    @extend %placeholder-#{$arg};
}

调用混入:

.classname {
    @include example-mixin('value');
}

这几乎可以工作，但出于某种原因，在 CSS 输出中 .classname 被赋予了两次，就好像它是后代选择器一样:

.classname .classname {
    property: value;
}

我没有看到重复类名背后的逻辑 - 谁能看出我做错了什么和/或提出解决方法？

Answer 1

让我们看看如果使用真实类而不是扩展类会发生什么

.a {
    .b {
        color: blue;
    }

    @extend .b;
}

输出:

.a .b, .a .a {
  color: blue;
}

我能想象你想要这样做的唯一原因是你可以使用扩展类来扩展而不是 .classname 像这样:

.c {
    @extend .b;
}

您会发现输出可能根本不是您想要的:

.a .b, .a .a, .a .c {
  color: blue;
}

.a .a 对我来说也没有多大意义，但它是无害的。你真正想要做的是这样的:

%placeholder-name, .classname {
    property: name;
}

.foo {
    @extend %placeholder-name;
}

输出将是这样的:

.foo, .classname {
  property: name;
}