静的CSSをエラーなく処理するプレースホルダー用のSASSミックスインを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

静的CSSをエラーなく処理するプレースホルダー用のSASSミックスインを作成するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-10-26 14:12:31

オリジナル

387 人が閲覧しました

How to create a SASS mixin for placeholders that handles static CSS without errors?

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

質問:
SASS でプレースホルダーのミックスインを作成する方法これにより、構文エラーなしで静的 CSS を渡すことができますか?

回答:
プレースホルダーミックスインで静的 CSS をシームレスに渡すには、@content ディレクティブを利用できます。

更新された Mixin:

<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>

ログイン後にコピー

Advanced Mixin (Sass 3.4 以降) :

柔軟性を高めるために、次のミックスインを使用して、ネストされた使用法とネストされていない使用法の両方をサポートできます:

<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>

ログイン後にコピー

このミックスインは、さまざまな CSS で機能する、より堅牢なプレースホルダーアプローチを提供します。セレクターとネストされた要素。

以上が静的CSSをエラーなく処理するプレースホルダー用のSASSミックスインを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。