占位符Mixin SCSS / CSS

一尘不染

占位符Mixin SCSS / CSS

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并将其完全传递给上面的函数。

这可能吗？

阅读 293

2020-05-16

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

2020-05-16