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

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>

Penggunaan:

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

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>

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!