You could easily create a mixin and define the style of all placeholders just once, through a content block passed to the mixin itself, like so:
@mixin placeholder {
@each $placeholder
in "::-webkit-input-placeholder",
":-moz-placeholder",
"::-moz-placeholder",
":-ms-input-placeholder" {
/* for each placeholder in the above list print the browser vendor
selector, chained with its parent element */
&#{$placeholder} {
/* content is replaced with the actual style, passed as a block
in the mixin inclusion below */
@content;
}
}
}
:focus {
@include placeholder {
color: #ccc;
font-style: italic;
}
}
This will produce the following output
:focus::-webkit-input-placeholder {
color: #ccc;
font-style: italic;
}
:focus:-moz-placeholder {
color: #ccc;
font-style: italic;
}
:focus::-moz-placeholder {
color: #ccc;
font-style: italic;
}
:focus:-ms-input-placeholder {
color: #ccc;
font-style: italic;
}
You can test the sass code on http://sassmeister.com/