占位符混合SCSS/CSS

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

这可能吗？

解决方法

您正在寻找@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可以这样写，以工作嵌套和非嵌套：

@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

解决方法

猜你在找的CSS相关文章