Wie formatiere ich Platzhaltertext mithilfe eines Mixins in SCSS/CSS?-CSS-Tutorial-php.cn

Wie formatiere ich Platzhaltertext mithilfe eines Mixins in SCSS/CSS?

Susan Sarandon

Freigeben： 2024-10-26 13:34:30

Original

1025 Leute haben es durchsucht

How to Style Placeholder Text using a Mixin in SCSS/CSS?

Platzhalter-Mixin in SCSS/CSS

Herausforderung:
Erstellen Sie ein Mixin, um Platzhaltertext statisch zu formatieren CSS in Sass.

Mixin-Versuch:

<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

Problem:
Das Mixin funktioniert aufgrund der übergebenen Doppelpunkte und Semikolons nicht durch den $css-Parameter, wodurch browserspezifische Platzhalterselektoren beeinträchtigt werden.

Lösung: Verwendung der @content-Direktive
Führen Sie die @content-Direktive ein, um statisches CSS in das Mixin einzubinden, ohne das zu unterbrechen Platzhalterselektoren.

<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 Verbesserung: Verschachtelte und nicht verschachtelte Verwendung (Sass 3.4)

<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

Dadurch können Sie das Platzhalter-Mixin in anderen Selektoren verschachteln Immer noch auf das Platzhalterelement ausgerichtet.

Das obige ist der detaillierte Inhalt vonWie formatiere ich Platzhaltertext mithilfe eines Mixins in SCSS/CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!