Wie erstelle ich ein Platzhalter-Mixin in SCSS/CSS, das mit Doppelpunkten und Semikolons funktioniert?

Platzhalter-Mixin in SCSS/CSS

Sie möchten ein Mixin für Platzhalter in Sass erstellen. Das von Ihnen entworfene Mixin stößt auf Probleme aufgrund der Einbeziehung von Doppelpunkten und Semikolons in das bereitgestellte CSS.

Glücklicherweise bietet Sass mit der @content-Direktive eine Lösung. Durch die Verwendung von @content in Ihrem Mixin können Sie statisches CSS direkt übergeben, wie unten gezeigt:

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

Weitere Einzelheiten finden Sie in der Sass-Referenz unter:
http://sass-lang. com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

Sass 3.4 und darüber hinaus

In Sass 3.4 und höher können Sie das @optional- verwenden. at-root-Mixin, um die Funktionalität sowohl in verschachtelten als auch in nicht verschachtelten Szenarien sicherzustellen:

@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $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;
  }
}

Verwendung und Ausgabe

.foo {
  @include placeholder {
    color: green;
  }
}

@include placeholder {
  color: red;
}

Dies wird Folgendes ausgeben:

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

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