防止組合

Question

我想我的集團所有供應商特定的東西變成一個佔位符選擇這樣的：

%search-bar-placeholder { 
    color: red; 
} 

.search-bar::-webkit-input-placeholder { 
    @extend %search-bar-placeholder; 
} 

.search-bar:-moz-placeholder { 
    @extend %search-bar-placeholder; 
} 

.search-bar::-moz-placeholder { 
    @extend %search-bar-placeholder; 
} 

.search-bar:-ms-input-placeholder { 
    @extend %search-bar-placeholder; 
} 

然後它編譯成這樣：

.search-bar::-webkit-input-placeholder, .search-bar:-moz-placeholder, .search-bar::-moz-placeholder, .search-bar:-ms-input-placeholder { 
    color: red; } 

哪有我確定Sass不會將所有選擇器放在一起？就像這樣：

.search-bar::-webkit-input-placeholder { 
    color: red; 
} 

.search-bar:-moz-placeholder { 
    color: red; 
} 

.search-bar::-moz-placeholder { 
    color: red; 
} 

.search-bar:-ms-input-placeholder { 
    color: red; 
} 

Answer 1

當Extend/Inheritance看着sass-lang.com似乎選擇將永遠是逗號分隔。即使添加了其他屬性，它也會將共享屬性保留在逗號分隔列表中，併爲該重寫值添加另一個選擇器。

我通過使用mixin實現了你想要的東西。雖然這不是混合的目的，但它確實完成了工作。您的風格仍然集中，您也可以使用一個襯墊在每個選擇器中打印出來。

@mixin placeholder-properties() { 
    color: red; 
    font-weight: bold; 
} 

.search-bar::-webkit-input-placeholder { 
    @include placeholder-properties(); 
} 

.search-bar:-moz-placeholder { 
    @include placeholder-properties(); 
} 

.search-bar::-moz-placeholder { 
    @include placeholder-properties(); 
} 

.search-bar:-ms-input-placeholder { 
    @include placeholder-properties(); 
} 

結果會如下。

.search-bar::-webkit-input-placeholder { 
    color: red; 
    font-weight: bold; 
} 

.search-bar:-moz-placeholder { 
    color: red; 
    font-weight: bold; 
} 

.search-bar::-moz-placeholder { 
    color: red; 
    font-weight: bold; 
} 

.search-bar:-ms-input-placeholder { 
    color: red; 
    font-weight: bold; 
} 

這是fiddle。