I'm trying to create a mixin for placeholders in sass.
This is the mixin I've created.
@mixin placeholder ($css) {
::-webkit-input-placeholder {$css}
:-moz-placeholder {$css}
::-moz-placeholder {$css}
:-ms-input-placeholder {$css}
}
This is how I'd like to include the mixin:
@include placeholder(font-style:italic; color: white; font-weight:100;);
Obviously this isn't going to work because of all the colons and semi-colons that's being passed through to the mixin, but... I'd really like to just input static css and pass it through exactly like the above function.
Is this possible?
Why not something like this?
It uses a combination of lists, iteration, and interpolation.
@mixin placeholder ($rules) {
@each $rule in $rules {
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
#{nth($rule, 1)}: #{nth($rule, 2)};
}
}
}
$rules: (('border', '1px solid red'),
('color', 'green'));
@include placeholder( $rules );
I found the approach given by cimmanon and Kurt Mueller almost worked, but that I needed a parent reference (i.e., I need to add the '&' prefix to each vendor prefix); like this:
@mixin placeholder {
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
}
I use the mixin like this:
input {
@include placeholder {
font-family: $base-font-family;
color: red;
}
}
With the parent reference in place, then correct css gets generated, e.g.:
input::-webkit-input-placeholder {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif;
color: red;
}
Without the parent reference (&), then a space is inserted before the vendor prefix and the CSS processor ignores the declaration; that looks like this:
input::-webkit-input-placeholder {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif;
color: red;
}
To avoid 'Unclosed block: CssSyntaxError' errors being thrown from sass compilers add a ';' to the end of @content.
@mixin placeholder {
::-webkit-input-placeholder { @content;}
:-moz-placeholder { @content;}
::-moz-placeholder { @content;}
:-ms-input-placeholder { @content;}
}
This is for shorthand syntax
=placeholder
&::-webkit-input-placeholder
@content
&:-moz-placeholder
@content
&::-moz-placeholder
@content
&:-ms-input-placeholder
@content
use it like
input
+placeholder
color: red
Source: Stackoverflow.com