来自Mixins的Sass占位符

Question

I want to create Sass placeholders on the fly using arbitrary values passed from a style block:

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

Calling the mixin:

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

This almost works, but for some reason in the CSS output the .classname is given twice as though it's a descendant selector:

.classname .classname {
    property: value;
}

I'm not seeing the logic behind the duplicate class names - can anyone see what I'm doing wrong and/or suggest a workaround?

Answer 1

Let's look at what happens if you use real classes instead of extend classes

.a {
    .b {
        color: blue;
    }

    @extend .b;
}

Output:

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

The only reason I could imagine you wanting to do this is so you can use the extend class for purposes of extending instead of .classname like so:

.c {
    @extend .b;
}

You'll see that the output probably isn't what you want at all:

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

The .a .a doesn't make a whole lot of sense to me either, but it's harmless. What you're actually wanting to do is something like this:

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

.foo {
    @extend %placeholder-name;
}

And the output will be like this:

.foo, .classname {
  property: name;
}