可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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?
回答1:
You're looking for the @content directive:
@mixin placeholder { ::-webkit-input-placeholder {@content} :-moz-placeholder {@content} ::-moz-placeholder {@content} :-ms-input-placeholder {@content} } @include placeholder { font-style:italic; color: white; font-weight:100; }
SASS Reference has more information, which can be found here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content
As of Sass 3.4, this mixin can be written like so to work both nested and unnested:
@mixin optional-at-root($sel) { @at-root #{if(not &, $sel, selector-append(&, $sel))} { @content; } } @mixin placeholder { @include optional-at-root('::-webkit-input-placeholder') { @content; } @include optional-at-root(':-moz-placeholder') { @content; } @include optional-at-root('::-moz-placeholder') { @content; } @include optional-at-root(':-ms-input-placeholder') { @content; } }
Usage:
.foo { @include placeholder { color: green; } } @include placeholder { color: red; }
Output:
.foo::-webkit-input-placeholder { color: green; } .foo:-moz-placeholder { color: green; } .foo::-moz-placeholder { color: green; } .foo:-ms-input-placeholder { color: green; } ::-webkit-input-placeholder { color: red; } :-moz-placeholder { color: red; } ::-moz-placeholder { color: red; } :-ms-input-placeholder { color: red; }
回答2:
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; }
回答3:
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
回答4:
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 );
回答5:
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;} }
