Mixins 中的 Sass 占位符

【问题标题】：Sass Placeholders from MixinsMixins 中的 Sass 占位符
【发布时间】：2013-02-27 02:59:21
【问题描述】：

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

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

调用mixin：

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

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

.classname .classname {
    property: value;
}

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

【问题讨论】：

标签： css sass

【解决方案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;
}

【讨论】：