styling placeholder text

input-placeholder.sass

// Mixins ---------------------------------------------------------------

=placeholder-style
  color: #777
  // add your defaults here.
  // if you need more than one style-group you can either create several mixins,
  // or just name the style-groups and take a single style-group-name argument.

=apply-placeholders
  &::-webkit-input-placeholder
    +placeholder-style
  &:-moz-placeholder
    +placeholder-style
  &.placeholder 
    +placeholder-style

// Template --------------------------------------------------------------
// you can create as many templates as you need for your site

.placeholders
  +apply-placeholders

// Placeholders --------------------------------------------------------------
// call the template with @extend when you can
// or, when fighting the cascade you can call the mixin

input, textarea
  @extend .placeholders

.something
  +apply-placeholders

output.css

.placeholders::-webkit-input-placeholder, input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #777777;
}
.placeholders:-moz-placeholder, input:-moz-placeholder, textarea:-moz-placeholder {
  color: #777777;
}
.placeholders.placeholder, input.placeholder, textarea.placeholder {
  color: #777777;
}

.something::-webkit-input-placeholder {
  color: #777777;
}
.something:-moz-placeholder {
  color: #777777;
}
.something.placeholder {
  color: #777777;
}

x-alternative.sass

// Multiple Placeholder Styles ---------------------------------------------------------------

=placeholder-style($style:false)
  // main styles used by default
  @if (not $style) or ($style == 'main')
    color: #777
  
  // alternative style
  @if $style == 'alt'
    color: #444

=apply-placeholders($style:false)
  &::-webkit-input-placeholder
    +placeholder-style($style)
  &:-moz-placeholder
    +placeholder-style($style)
  &.placeholder 
    +placeholder-style($style)