占位符混合 SCSS/CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17181849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Placeholder Mixin SCSS/CSS
提问by Shannon Hochkins
I'm trying to create a mixin for placeholders in sass.
我正在尝试为 sass 中的占位符创建一个 mixin。
This is the mixin I've created.
这是我创建的 mixin。
@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:
这就是我想包含 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.
显然这是行不通的，因为所有的冒号和分号都被传递到 mixin，但是......我真的很想只输入静态 css 并像上面的函数一样传递它。
Is this possible?
这可能吗？
回答by cimmanon
You're looking for the @contentdirective:
您正在寻找@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 Reference has more information, which can be found here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content
SASS Reference 有更多信息，可以在这里找到：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:
从 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;
}
}
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;
}
回答by Dave Hein
I found the approach given by cimmanonand Kurt Muelleralmost worked, but that I needed a parent reference (i.e., I need to add the '&' prefix to each vendor prefix); like this:
我发现cimmanon和Kurt Mueller给出的方法几乎有效，但我需要一个父引用（即，我需要为每个供应商前缀添加“&”前缀）；像这样：
@mixin placeholder {
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
}
I use the mixin like this:
我像这样使用mixin：
input {
@include placeholder {
font-family: $base-font-family;
color: red;
}
}
With the parent reference in place, then correct css gets generated, e.g.:
有了父引用，就会生成正确的 css，例如：
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:
如果没有父引用 (&)，则在供应商前缀之前插入一个空格，CSS 处理器将忽略该声明；看起来像这样：
input::-webkit-input-placeholder {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif;
color: red;
}
回答by igrossiter
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
回答by NoDirection
To avoid 'Unclosed block: CssSyntaxError' errors being thrown from sass compilers add a ';' to the end of @content.
为避免 sass 编译器抛出“未关闭的块：CssSyntaxError”错误，请添加“;” 到@content 的结尾。
@mixin placeholder {
::-webkit-input-placeholder { @content;}
:-moz-placeholder { @content;}
::-moz-placeholder { @content;}
:-ms-input-placeholder { @content;}
}
回答by Kurt Mueller
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 );
