Bagaimana untuk Mencipta Mixin Pemegang Tempat dalam SCSS/CSS Menggunakan @content dan @at-root?

Campuran Pemegang Tempat dalam SCSS/CSS

Anda menghadapi isu mencipta campuran pemegang tempat dalam Sass disebabkan kehadiran titik bertindih dan koma bernoktah dalam sifat CSS yang dihantar ke the mixin.

Untuk mengatasi cabaran ini, gunakan arahan @content dalam mixin anda:

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

Anda kini boleh memasukkan mixin seperti berikut:

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

Selain itu, Sass 3.4 memperkenalkan arahan @at-root, membolehkan anda menulis mixin anda dengan cara yang berfungsi dalam konteks 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>

Dengan menggunakan @at-root bersama-sama dengan @content , anda memastikan mixin anda berfungsi dengan betul dalam semua senario.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Mixin Pemegang Tempat dalam SCSS/CSS Menggunakan @content dan @at-root?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!