[英]Placeholder Mixin SCSS/CSS
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? 这可能吗?
You're looking for the @content
directive: 你正在寻找@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参考有更多信息,可以在这里找到: 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可以这样编写,既可以嵌套也可以使用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;
}
I found the approach given by cimmanon and Kurt Mueller almost worked, but that I needed a parent reference (ie, I need to add the '&' prefix to each vendor prefix); 我发现cimmanon和Kurt Mueller给出的方法几乎可以工作,但我需要一个父引用(即,我需要为每个供应商前缀添加'&'前缀); like this: 像这样:
@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, eg: 使用父引用,然后生成正确的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; 如果没有父引用(&),则在供应商前缀之前插入一个空格,CSS处理器忽略该声明; 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;
}
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
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 );
To avoid 'Unclosed block: CssSyntaxError' errors being thrown from sass compilers add a ';' 为了避免从sass编译器抛出'Unclosed block:CssSyntaxError'错误,添加一个';' to the end of @content. 到@content的结尾。
@mixin placeholder {
::-webkit-input-placeholder { @content;}
:-moz-placeholder { @content;}
::-moz-placeholder { @content;}
:-ms-input-placeholder { @content;}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.