占位符混合SCSS / CSS [英] Placeholder Mixin SCSS/CSS

问题描述

我试图在sass中为占位符创建一个mixin。

I'm trying to create a mixin for placeholders in sass.

这是我创建的mixin。

This is the mixin I've created.

@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，并通过它完全像上面的函数。

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.

这是否可能？

推荐答案

您正在寻找 @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 Reference has more information, which can be found here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

从Sass 3.4开始，这个mixin可以写成嵌套和unnested：

As of Sass 3.4, this mixin can be written like so to work both nested and 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;
}

这篇关于占位符混合SCSS / CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！