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

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

DDD

Freigeben： 2024-10-27 04:02:02

Original

743 Leute haben es durchsucht

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Verwendung und Ausgabe

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

@include placeholder {
  color: red;
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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!