Cara Menggunakan Sifat CSS sebagai Nilai Campuran SASS: Panduan untuk Interpolasi Rentetan

Menggunakan Sifat CSS sebagai Nilai Campuran SASS

Dalam percubaan untuk mencipta campuran margin/padding serba boleh, anda telah menghadapi masalah dalam SASS. Mari kita teliti masalah yang anda terangkan dan cari penyelesaian bersama-sama.

Menetapkan Sifat CSS dalam Campuran

Kod anda cuba menetapkan sifat CSS (margin dan padding) dalam nilai campuran SASS. Walau bagaimanapun, terdapat isu utama: sifat CSS tidak boleh digunakan sebagai nilai campuran secara langsung. Sebaliknya, anda perlu menggunakan teknik yang dipanggil "interpolasi rentetan" untuk memasukkan pembolehubah sebagai nama sifat.

Menggunakan Interpolasi Rentetan

Interpolasi rentetan membolehkan anda memasukkan nilai pembolehubah ke dalam rentetan menggunakan #{$ pembolehubah} sintaks. Ini membantu anda menetapkan sifat CSS secara dinamik berdasarkan pembolehubah dalam campuran.

Begini cara anda boleh mengubah suai kod anda untuk menggunakan interpolasi rentetan:

<code class="sass">[class*="shift"] {
  $sft-o: 10px;

  @mixin shift_stp($val) {
    &[class*="_sml"]{ #{$val}: $sft-o; }
    &[class*="_mid"]{ #{$val}: $sft-o * 2; }
    &[class*="_big"]{ #{$val}: $sft-o * 3; }
  }

  &[class*="_m"]{
    @include shift_stp(margin);
  }

  &[class*="_p"]{
    @include shift_stp(padding);
  }
}</code>

Nota tentang Pemilih Atribut

Adalah penting untuk ambil perhatian bahawa pemilih atribut yang anda gunakan (*="_m") juga akan memadankan elemen dengan "_mid" dalam nama kelasnya. Ini mungkin bukan tingkah laku yang anda maksudkan, jadi pertimbangkan untuk menyemak pemilih atribut anda dengan sewajarnya.

Atas ialah kandungan terperinci Cara Menggunakan Sifat CSS sebagai Nilai Campuran SASS: Panduan untuk Interpolasi Rentetan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!