Wie kann ich in SCSS/CSS ein effizientes Platzhalter-Mixin erstellen, das verschachtelte und nicht verschachtelte Selektoren verarbeitet?-CSS-Tutorial-php.cn

Wie kann ich in SCSS/CSS ein effizientes Platzhalter-Mixin erstellen, das verschachtelte und nicht verschachtelte Selektoren verarbeitet?

Linda Hamilton

Freigeben： 2024-10-26 21:41:02

Original

935 Leute haben es durchsucht

How can I create an efficient placeholder mixin in SCSS/CSS that handles nested and unnested selectors?

Platzhalter-Mixin in SCSS/CSS

Beim Erstellen eines SASS-Mixins für Platzhalter reicht ein einfaches Mixin wie das folgende möglicherweise nicht aus die Anzahl der Doppelpunkte und Semikolons, die an ihn weitergeleitet werden:

<code class="scss">@mixin placeholder ($css) {
  ::-webkit-input-placeholder {$css}
  :-moz-placeholder           {$css}
  ::-moz-placeholder          {$css}
  :-ms-input-placeholder      {$css}  
}</code>

Nach dem Login kopieren

Verwendung der @content-Direktive

Um statisches CSS genau so an ein Mixin weiterzuleiten Auf Wunsch kann die @content-Direktive verwendet werden. Hier ist ein Beispiel:

<code class="scss">@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;
}</code>

Nach dem Login kopieren

Weitere Informationen finden Sie in der SASS-Referenz unter https://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content.

Optionales @-root-Mixin (Sass 3.4 und höher)

In Sass 3.4 und höher kann das optionale @-root-Mixin verwendet werden, um verschachtelte und nicht verschachtelte Selektoren effektiv zu handhaben:

<code class="scss">@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;
  }
}</code>

Nach dem Login kopieren

Verwendung:

<code class="scss">.foo {
  @include placeholder {
    color: green;
  }
}

@include placeholder {
  color: red;
}</code>

Nach dem Login kopieren

Ausgabe:

<code class="css">.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;
}</code>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich in SCSS/CSS ein effizientes Platzhalter-Mixin erstellen, das verschachtelte und nicht verschachtelte Selektoren verarbeitet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!