Question

我正在尝试为sass中的占位符创建一个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并将其传递完全如上所述功能。

这可能吗？

Answer 1

您正在寻找@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可以这样编写，既可以嵌套也可以使用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;
  }
}

用法：

.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;
}

Answer 2

我发现cimmanon和Kurt Mueller给出的方法几乎有效，但我需要一个父引用（即，我需要为每个供应商前缀添加'＆amp;'前缀）;像这样：

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

如果没有父引用（＆amp;），则在供应商前缀之前插入一个空格，CSS处理器忽略该声明;看起来像这样：

input::-webkit-input-placeholder {
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif;
    color: red;
}

Answer 3

这是缩写语法

=placeholder
  &::-webkit-input-placeholder
    @content
  &:-moz-placeholder
    @content
  &::-moz-placeholder
    @content
  &:-ms-input-placeholder
    @content

像

一样使用它

input
  +placeholder
    color: red

Answer 4

为什么不是这样的？

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

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

Answer 5

要避免从sass编译器抛出'Unclosed block：CssSyntaxError'错误，请添加';'到@content结尾。

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

Answer 6

我使用与NoDirection写的完全相同的sass mixin占位符。我在sass mixins collection here中找到了它，我对它非常满意。其中a text更多地解释了mixins选项。

占位符Mixin SCSS / CSS

6 个答案: