プレースホルダMixin SCSS/CSS

Question

私は、sassのプレースホルダ用のミックスインを作成しようとしています。

これは私が作成したミックスインです。明らかにこれが原因でミックスインに渡されていますすべてのコロンとセミコロンの仕事に行くのではありません

@include placeholder(font-style:italic; color: white; font-weight:100;); 

：

@mixin placeholder ($css) { 
    ::-webkit-input-placeholder {$css} 
    :-moz-placeholder   {$css} 
    ::-moz-placeholder   {$css} 
    :-ms-input-placeholder  {$css} 
} 

この

は、私はミックスインを含めたい方法です、しかし...私は本当にちょうど静的CSSを入力し、上記の関数とまったく同じように通過したいと思います。

これは可能ですか？あなたは@contentディレクティブを探している

Answer 1

：SASSリファレンスはここで見つけることができますより多くの情報が

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

：サス3.4のよう http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

---

を、このミックスインをすることができネストされたものとネストされていないものの両方で動作するように書かれています。

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

Answer 2

なぜこのような何か？

リスト、反復、および補間の組み合わせを使用します。

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

Answer 3

は私はほとんど働いcimmanonとKurt Muellerによって与えられたアプローチを発見したが、私は、親の参照が必要であること（すなわち、Iは各ベンダープレフィックスに「&」接頭辞を追加する必要があります）。このように：代わりに親参照して

input { @include placeholder { 
    font-family: $base-font-family; 
    color: red; 
}} 

、正しいCSSが生成されます、例えば：

@mixin placeholder { 
    &::-webkit-input-placeholder {@content} 
    &:-moz-placeholder   {@content} 
    &::-moz-placeholder   {@content} 
    &:-ms-input-placeholder  {@content} 
} 

私はこのようなミックスインを使用します：ベンダープレフィックスとCSSプロセッサは、宣言を無視する前に、親参照（&）なし

input::-webkit-input-placeholder { 
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif; 
    color: red; } 

は、その後スペースが挿入されています。それは次のようになります。

input ::-webkit-input-placeholder { 
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif; 
    color: red; } 

Answer 4

これは簡略構文です

=placeholder 
    &::-webkit-input-placeholder 
    @content 
    &:-moz-placeholder 
    @content 
    &::-moz-placeholder 
    @content 
    &:-ms-input-placeholder 
    @content 

がないようにするには

input 
    +placeholder 
    color: red 

Answer 5

のようにそれを使用する「閉じられていないブロックを：CssSyntaxError」サスコンパイラからスローされたエラーが追加します';' @contentの終わりまで。

@mixin placeholder { 
    ::-webkit-input-placeholder { @content;} 
    :-moz-placeholder   { @content;} 
    ::-moz-placeholder   { @content;} 
    :-ms-input-placeholder  { @content;} 
}