Предотвратить сочетание нескольких селекторов

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

Как может Я уверен, что Сасс не объединяет все селектора? Как это:

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