css - 占位符混合 SCSS/CSS

Question

我正在尝试为 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 并完全像上面那样传递它功能。

这可能吗？

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 Reference 有更多信息，可以在这里找到: 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;
}