我想为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;
}
