Wie erstelle ich ein Platzhalter-Mixin in SCSS/CSS mit @content und @at-root?

Platzhalter-Mixin in SCSS/CSS

Sie haben ein Problem beim Erstellen eines Platzhalter-Mixins in Sass, da in den übergebenen CSS-Eigenschaften Doppelpunkte und Semikolons vorhanden sind das Mixin.

Um diese Herausforderung zu meistern, verwenden Sie die @content-Direktive in Ihrem Mixin:

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

Sie können das Mixin jetzt wie folgt einbinden:

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

Darüber hinaus führt Sass 3.4 die @at-root-Direktive ein, die es Ihnen ermöglicht, Ihr Mixin auf eine Weise zu schreiben, die sowohl in verschachtelten als auch in nicht verschachtelten Kontexten funktioniert:

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

Durch die Verwendung von @at-root in Verbindung mit @content , stellen Sie sicher, dass Ihr Mixin in allen Szenarien korrekt funktioniert.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Platzhalter-Mixin in SCSS/CSS mit @content und @at-root?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!