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, nutzen Sie die @content-Direktive in Ihrem mixin:

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}

Sie können das Mixin nun wie folgt einbinden:

@include placeholder {
    font-style: italic;
    color: white;
    font-weight: 100;
}

Zusätzlich 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 nicht verschachtelten Kontexten funktioniert:

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

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