占位符Mixin SCSSCSS

您正在寻找

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