Bagaimana untuk Menggayakan Teks Pemegang Tempat menggunakan Mixin dalam SCSS/CSS?-tutorial css-php.cn

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

Susan Sarandon

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

asal

1024 orang telah melayarinya

How to Style Placeholder Text using a Mixin in 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>

Salin selepas log masuk

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>

Salin selepas log masuk

Peningkatan Selanjutnya: Penggunaan Bersarang dan Tidak Bersarang (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>

Salin selepas log masuk

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!