私は、sassのプレースホルダー用のmixinを作成しようとしています。
これは私が作成したミックスインです。
@mixin placeholder ($css) {
::-webkit-input-placeholder {$css}
:-moz-placeholder {$css}
::-moz-placeholder {$css}
:-ms-input-placeholder {$css}
}
これは、ミックスインを含める方法です:
@include placeholder(font-style:italic; color: white; font-weight:100;);
明らかに、これはすべてのコロンとセミコロンがミックスインに渡されるため機能しませんが、...静的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 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}
}
私はこのようにミックスインを使用します:
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コンパイラからスローされる「Unclosed block:CssSyntaxError」エラーを回避するには、「;」を追加します@contentの最後まで。
@mixin placeholder {
::-webkit-input-placeholder { @content;}
:-moz-placeholder { @content;}
::-moz-placeholder { @content;}
:-ms-input-placeholder { @content;}
}