我想为sass中的占位符创建一个mixin。
这是我创建的mixin。
@mixin placeholder ($css) { ::-webkit-input-placeholder {$css} :-moz-placeholder {$css} ::-moz-placeholder {$css} :-ms-input-placeholder {$css} }
这是我想包括mixin:
@include placeholder(font-style:italic; color: white; font-weight:100;);
显然,这不工作,因为所有的冒号和分号被传递到mixin,但…我真的想只输入静态css,并通过它完全像上面的函数。
这可能吗?
解决方法
您正在寻找@content指令:
@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参考有更多的信息,可以在这里找到:
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content
从Sass 3.4,这个mixin可以这样写,以工作嵌套和非嵌套:
@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; } }
用法:
.foo { @include placeholder { color: green; } } @include placeholder { color: red; }
输出:
.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; }