防止の組み合わせ

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がすべてのセレクターを一緒に置かないことを確認しますか？このように：sass-lang.comでExtend/Inheritanceを見てみると

.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

セレクタが常にコンマが分離されるようです。別のプロパティを追加しても、共有プロパティはコンマ区切りのリストに保持され、そのオーバーライドされた値のためだけに別のセレクタが追加されます。

私が望むものを達成する方法は、ミックスインを使用することです。ミックスインの目的ではありませんが、仕事は終わりです。あなたのスタイルは依然として集中しており、1つのライナーも使って各セレクターで印刷することができます。

@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があります。