占位符 Mixin SCSS/CSS

我正在尝试为 Sass 中的占位符创建混音。

这是我创建的混音。

@mixin placeholder ($css) {
::-webkit-input-placeholder {$css}
:-moz-placeholder           {$css}
::-moz-placeholder          {$css}
:-ms-input-placeholder      {$css}
}

下面是我想要包含混合的方式:

@include placeholder(font-style:italic; color: white; font-weight:100;);

显然这不会起作用，因为所有的冒号和分号都会传递给混合函数，但是... 我真的很想输入静态 css，然后像上面的函数一样传递它。

这可能吗？

125418 次浏览
小开
最佳答案

你要找的是 @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;
}

(只提供英文版本): Http://sass-lang.com/docs/yardoc/file.sass_reference.html#mixin-content

在 Sass 3.4中，这个混合函数可以这样编写，既可以工作在嵌套的环境中，也可以工作在未嵌套的环境中:

@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;
}
小开

为什么不像这样？

它使用列表、迭代和插值的组合。

@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 );
小开

我发现 Cimmanon和 Kurt Mueller给出的方法几乎奏效了，但是我需要一个父引用(即，我需要在每个供应商的前缀中添加’&’前缀) ; 像这样:

@mixin placeholder {
&::-webkit-input-placeholder {@content}
&:-moz-placeholder           {@content}
&::-moz-placeholder          {@content}
&:-ms-input-placeholder      {@content}
}

我是这样使用混音的:

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
小开

为了避免从 sass 编译器抛出“ Unclose block: CssSyntaxError”错误，请在@content 的末尾添加一个“ ;”。

@mixin placeholder {
::-webkit-input-placeholder { @content;}
:-moz-placeholder           { @content;}
::-moz-placeholder          { @content;}
:-ms-input-placeholder      { @content;}
}
小开

我使用的是和 NoDirect 写的完全一样的 Sass Mixin 占位符。我发现它在 sass 混合收集 给你，我非常满意。有一个 一条短信可以更好地解释混合选项。


提交答案