CSS3 Input Placeholders using Sass 3.2

sass-input-placeholders

// Handle browser inconsistencies with placeholder pseudo-elements.
@mixin placeholders {
	&::-webkit-input-placeholder { @content; }
	&:-moz-placeholder { @content; }
	&::placeholder { @content; }
}

// Set the colour for input placeholder text.
@mixin placeholder($color: #bfbfbf) {
	@include placeholders {
		color: $color;
	}
}

Requires Sass 3.2 (uses the new mixin content feature).

An improved version of this gist is already in Compass' master branch and should land in the next release (code below). Until then you can use it as a custom mixin in your own stylesheets:

// Style the html5 input placeholder in browsers that support it.
//
// The styles for the input placeholder are passed as mixin content.
// For example:
//
//     @include input-placeholder {
//       color: #bfbfbf;
//       font-style: italic;
//     }
@mixin input-placeholder {
    @if $experimental-support-for-webkit {
        &::-webkit-input-placeholder { @content; }
    }
    @if $experimental-support-for-mozilla {
        &:-moz-placeholder { @content; }
    }
    @if $experimental-support-for-microsoft {
        &:-ms-input-placeholder { @content; }
    }
}