SCSS/CSS でコロンとセミコロンを使用するプレースホルダーミックスインを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

SCSS/CSS でコロンとセミコロンを使用するプレースホルダーミックスインを作成するにはどうすればよいですか?

DDD

リリース： 2024-10-27 04:02:02

オリジナル

745 人が閲覧しました

How to Create a Placeholder Mixin in SCSS/CSS that Works With Colons and Semicolons?

SCSS/CSS のプレースホルダー Mixin

Sass でプレースホルダー用の Mixin を作成しようとしています。設計したミックスインでは、提供された CSS にコロンとセミコロンが含まれているために問題が発生します。

幸いなことに、Sass は @content ディレクティブを通じて解決策を提供します。ミックスインで @content を使用すると、以下に示すように静的 CSS を直接渡すことができます:

@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 以降

Sass 3.4 以降では、@optional-ネストされたシナリオとネストされていないシナリオの両方で機能を保証するための at-root mixin:

@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;
  }
}

ログイン後にコピー

使用法と出力

.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;
}

ログイン後にコピー

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