萨斯占位符从混入

Question

我想利用从样式块通过任意值动态创建的Sass占位符：

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

调用混入：

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

唯一的原因，我能想象你想要做的是这样的话，你可以使用扩展类的目的是扩展而不是.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; 
}