Bagaimana untuk Menggayakan Teks Pemegang Tempat menggunakan Mixin dalam SCSS/CSS?

Campuran Pemegang Tempat dalam SCSS/CSS

Cabaran:
Buat campuran untuk menggayakan teks pemegang tempat menggunakan statik CSS dalam Sass.

Percubaan Mixin:

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

Masalah:
Mixin tidak berfungsi kerana titik bertindih dan koma bertitik lulus melalui parameter $css, mengganggu pemilih pemegang tempat khusus penyemak imbas.

Penyelesaian: Menggunakan Arahan @content
Perkenalkan arahan @content untuk memasukkan CSS statik dalam mixin tanpa mengganggu pemilih pemegang tempat.

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

Peningkatan Selanjutnya: Penggunaan Bersarang dan Tidak Bersarang (Sass 3.4 )

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

Ini membolehkan anda menyarangkan campuran pemegang tempat dalam pemilih lain semasa masih menyasarkan elemen pemegang tempat.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Teks Pemegang Tempat menggunakan Mixin dalam SCSS/CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!