我正在尝试为 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;
}
我发现cimmanon和Kurt Mueller给出的方法几乎奏效了，但我需要一个父引用（即，我需要在每个供应商前缀中添加“&”前缀）；像这样：
@mixin placeholder {
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
}
我像这样使用mixin：
input {
@include placeholder {
font-family: $base-font-family;
color: red;
}
}
有了父引用，就会生成正确的 css，例如：
input::-webkit-input-placeholder {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif;
color: red;
}
如果没有父引用 (&)，则会在供应商前缀之前插入一个空格，并且 CSS 处理器会忽略该声明；看起来像这样：
input::-webkit-input-placeholder {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif;
color: red;
}
这是简写语法
=placeholder
&::-webkit-input-placeholder
@content
&:-moz-placeholder
@content
&::-moz-placeholder
@content
&:-ms-input-placeholder
@content
像使用它一样
input
+placeholder
color: red
为什么不这样呢？
它使用列表、迭代和插值的组合。
@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 );
为避免 sass 编译器抛出“未关闭块：CssSyntaxError”错误，请添加“；” 到@content 的末尾。
@mixin placeholder {
::-webkit-input-placeholder { @content;}
:-moz-placeholder { @content;}
::-moz-placeholder { @content;}
:-ms-input-placeholder { @content;}
}