☰

プレースホルダー ミックスイン SCSS/CSS 質問する

tag-icon • tag-icon css sass
プレースホルダー ミックスイン SCSS/CSS 質問する

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

これは私が作成したミックスインです。

@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 を入力して、上記の関数とまったく同じように渡したいのです。

これは可能ですか？

ベストアンサー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 リファレンスにはさらに詳しい情報が記載されています。こちらをご覧ください: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;
}

おすすめ記事