css - Mixins的Sass占位符

我想使用从样式块传递的任意值即时创建Sass占位符：

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

调用mixin：

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

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

.classname .classname {
    property: value;
}

我没有看到重复的类名背后的逻辑-有人可以看到我在做什么错误和/或建议解决方法吗？

最佳答案

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

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