SCSS/CSS のミックスインを使用してプレースホルダーテキストのスタイルを設定する方法-CSSチュートリアル-php.cn

SCSS/CSS のミックスインを使用してプレースホルダーテキストのスタイルを設定する方法

Susan Sarandon

リリース： 2024-10-26 13:34:30

オリジナル

1024 人が閲覧しました

How to Style Placeholder Text using a Mixin in SCSS/CSS?

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

課題:
静的を使用してプレースホルダーテキストのスタイルを設定するミックスインを作成するSass 内の CSS。

ミックスインの試行:

<code class="scss">@mixin placeholder ($css) {
  ::-webkit-input-placeholder {$css}
  :-moz-placeholder           {$css}
  ::-moz-placeholder          {$css}
  :-ms-input-placeholder      {$css}  
}</code>

ログイン後にコピー

問題:
コロンとセミコロンが渡されたため、ミックスインが機能しません$css パラメーターを使用すると、ブラウザー固有のプレースホルダーセレクターと干渉します。

解決策: @content ディレクティブを使用する
@content ディレクティブを導入して、ミックスイン内に静的 CSS を含めます。プレースホルダーセレクター。

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

ログイン後にコピー

さらなる機能強化: ネストされた使用法とネストされていない使用法 (Sass 3.4 )

<code class="scss">@mixin optional-at-root($sel) {
  @at-root #{if(not &amp;, $sel, selector-append(&amp;, $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;
  }
}</code>

ログイン後にコピー

これにより、他のセレクター内でプレースホルダーミックスインをネストできるようになります。まだプレースホルダー要素をターゲットとしています。

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