Rumah > hujung hadapan web > tutorial css > Bagaimana untuk mencipta campuran SASS untuk ruang letak yang mengendalikan CSS statik tanpa ralat?

Bagaimana untuk mencipta campuran SASS untuk ruang letak yang mengendalikan CSS statik tanpa ralat?

Barbara Streisand
Lepaskan: 2024-10-26 14:12:31
asal
390 orang telah melayarinya

How to create a SASS mixin for placeholders that handles static CSS without errors?

Campuran Pemegang Tempat dalam SCSS/CSS

Soalan:
Cara mencipta campuran untuk pemegang tempat dalam SASS yang membenarkan penghantaran CSS statik tanpa ralat sintaks?

Jawapan:
Untuk mencapai penghantaran CSS statik yang lancar dalam campuran pemegang tempat, kami boleh menggunakan arahan @content.

Mixin Kemas Kini:

<code class="scss">@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}</code>
Salin selepas log masuk

Penggunaan:

<code class="scss">@include placeholder {
    font-style:italic;
    color: white;
    font-weight:100;
}</code>
Salin selepas log masuk

Mixin Terperinci (Sass 3.4 dan ke atas) :

Untuk fleksibiliti yang dipertingkatkan, anda boleh menggunakan mixin berikut untuk menyokong penggunaan bersarang dan tidak bersarang:

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

Mixin ini menyediakan pendekatan ruang letak yang lebih mantap yang berfungsi merentas pelbagai CSS pemilih dan elemen bersarang.

Atas ialah kandungan terperinci Bagaimana untuk mencipta campuran SASS untuk ruang letak yang mengendalikan CSS statik tanpa ralat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan