Chaining selectors in SASS

Question

Is there a way in sass to chain up selectors like this:

input {
    &::-webkit-input-placeholder,
    &:-moz-placeholder,
    &::-moz-placeholder,
    &:-ms-input-placeholder {
        color: red;
    }
}

That should work just fine as-is. Have you tried and found it not to work? — Paul Roub, May 27 '14 at 14:49
Then either something else is wrong, or the question is unclear. Run through SASS here, the output is `input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder { color: red; }`, just as I'd expect. If you're expecting something *else*, please include sample output in the question. — Paul Roub, May 27 '14 at 15:03
@panthro: The syntax is correct but the outputted selector is invalid. Comma-separating the `::placeholder` pseudo element does not work (because when a browser doesn't understand a selector (in this case because of the prefixes), it will invalidate the entire rule set). See: http://stackoverflow.com/questions/16982449/why-isnt-it-possible-to-combine-vendor-specific-pseudo-elements-classes-into-on — Synthesis, May 27 '14 at 16:01
Actually, this is more relevant: http://stackoverflow.com/questions/16982449/why-isnt-it-possible-to-combine-vendor-specific-pseudo-elements-classes-into-on — artlung, May 27 '14 at 23:06

score 0 · Answer 1 · answered May 27 '14 at 22:58

With these special vendor-specific pseudo selectors, I've found putting them all together on one line does not result in them working very well cross-browser. I think the best optimization you can hope for then is something like this:

@mixin placeholderstyle() {
  color: red;
}
input::-webkit-input-placeholder {
  @include placeholderstyle()
}
input:-moz-placeholder {
  @include placeholderstyle()
}
input::-moz-placeholder {
  @include placeholderstyle()
}
input:-ms-input-placeholder {
  @include placeholderstyle()
}

Chaining selectors in SASS

1 Answers1