Wie erstelle ich ein SASS-Mixin für Platzhalter, das statisches CSS fehlerfrei verarbeitet?

Platzhalter-Mixin in SCSS/CSS

Frage:
So erstellen Sie ein Mixin für Platzhalter in SASS das die Übergabe von statischem CSS ohne Syntaxfehler ermöglicht?

Antwort:
Um eine nahtlose Übergabe von statischem CSS in einem Platzhalter-Mixin zu erreichen, können wir die @content-Direktive verwenden.

Aktualisiertes Mixin:

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

Verwendung:

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

Erweitertes Mixin (Sass 3.4 und höher) :

Für mehr Flexibilität können Sie das folgende Mixin verwenden, um sowohl verschachtelte als auch nicht verschachtelte Verwendung zu unterstützen:

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

Dieses Mixin bietet einen robusteren Platzhalteransatz, der über verschiedene CSS hinweg funktioniert Selektoren und verschachtelte Elemente.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein SASS-Mixin für Platzhalter, das statisches CSS fehlerfrei verarbeitet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!