css - Mixins 中的 Sass 占位符

Question

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

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

调用混音：

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

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

.classname .classname {
    property: value;
}

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

score 1 · Accepted Answer

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

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

1 回答 1