@content と @at-root を使用して SCSS/CSS でプレースホルダー ミックスインを作成する方法

SCSS/CSS のプレースホルダー ミックスイン

に渡される CSS プロパティにコロンとセミコロンが存在するため、Sass でプレースホルダー ミックスインを作成するときに問題が発生しています。

この課題を克服するには、ミックスインで @content ディレクティブを利用します:

<code class="scss">@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}</code>

次のようにミックスインを含めることができます:

<code class="scss">@include placeholder {
    font-style: italic;
    color: white;
    font-weight: 100;
}</code>

さらに、Sass 3.4 では @at-root ディレクティブが導入されており、ネストされたコンテキストとネストされていないコンテキストの両方で動作する方法でミックスインを作成できるようになります。

<code class="scss">@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;
  }
}</code>

@at-root を @content と組み合わせて使用​​することにより、を使用すると、ミックスインがすべてのシナリオで正しく動作することが保証されます。

以上が@content と @at-root を使用して SCSS/CSS でプレースホルダー ミックスインを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。