占位符Mixin SCSS / CSS
我正在尝试为sass中的占位符创build一个mixin。
这是我创build的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，但是…我真的只想input静态的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 Reference有更多的信息，可以在这里find： http : //sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content
从Sass 3.4开始，这个mixin可以像这样写成嵌套和非embedded：
@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; }
我发现cimmanon和Kurt Mueller给出的方法几乎可行 ，但是我需要一个父引用（即，我需要为每个供应商前缀添加“＆”前缀）; 喜欢这个：
@mixin placeholder { &::-webkit-input-placeholder {@content} &:-moz-placeholder {@content} &::-moz-placeholder {@content} &:-ms-input-placeholder {@content} }
我使用这样的mixin：
input { @include placeholder { font-family: $base-font-family; color: red; }}
随着父引用到位，然后正确的CSS生成，例如：
input::-webkit-input-placeholder { font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif; color: red; }
如果没有父引用（＆），则在供应商前缀和CSS处理器忽略该声明之前插入一个空格; 看起来像这样：
input ::-webkit-input-placeholder { font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif; color: red; }
这是简写语法
=placeholder &::-webkit-input-placeholder @content &:-moz-placeholder @content &::-moz-placeholder @content &:-ms-input-placeholder @content
像使用它
input +placeholder color: red
为什么不是这样的？
它使用列表，迭代和插值的组合。
@mixin placeholder ($rules) { @each $rule in $rules { ::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder { #{nth($rule, 1)}: #{nth($rule, 2)}; } } } $rules: (('border', '1px solid red'), ('color', 'green')); @include placeholder( $rules );
为了避免sass编译器抛出的“未封闭的块：CssSyntaxError”错误，添加一个';' 到@content的结尾。
@mixin placeholder { ::-webkit-input-placeholder { @content;} :-moz-placeholder { @content;} ::-moz-placeholder { @content;} :-ms-input-placeholder { @content;} }
