来自Mixins的Sass占位符

Question

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

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

调用mixin：

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

我可以想象你想要这样做的唯一原因是你可以使用extend类来代替.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;
}

输出将是这样的：

{{1}}