薩斯佔位符從混入

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