Bagaimanakah Saya Boleh Menjana Senarai Kelas CSS Dipisahkan Koma Secara Dinamik dalam SCSS?

Membuat Senarai Kelas Dinamik dengan Pemisahan Koma

Keupayaan untuk mencipta senarai kelas secara dinamik dengan koma yang memisahkannya memainkan peranan penting dalam CSS dan SCSS, terutamanya apabila membina reka letak responsif.

Pertimbangkan kes Sistem grid SCSS: Anda ingin mencipta sistem grid dinamik menggunakan $columns sebagai pembolehubah untuk menentukan bilangan lajur. Semasa menggunakan @mixin col-x untuk menjana lebar kelas individu berfungsi dengan berkesan, cabaran timbul apabila cuba mencipta senarai kelas ini yang dipisahkan koma.

Menyelesaikan Isu Logik

@extend dalam SCSS menyediakan penyelesaian kepada cabaran ini. Dengan mentakrifkan campuran baharu yang dipanggil col-x-list yang termasuk pemegang tempat %float-styles yang mengandungi penggayaan yang diingini (float: left), anda boleh menggunakan gaya ini dengan lancar pada berbilang kelas menggunakan @extend:

$columns: 12;

%float-styles {
  float: left;
}

@mixin col-x-list {
  @for $i from 1 through $columns {
      .col-#{$i}-m { @extend %float-styles; }
  }
}

@include col-x-list;

Pendekatan ini menjana senarai kelas yang dipisahkan koma dengan yang ditentukan penggayaan:

.col-1-m, .col-2-m, .col-3-m, .col-4-m, .col-5-m, .col-6-m, .col-7-m, .col-8-m, .col-9-m, .col-10-m, .col-11-m, .col-12-m {
  float: left;
}

Bahan Rujukan

• [SCSS @extend Documentation](https://sass-lang.com/documentation/at-rules /lanjutkan)
• [SCSS @mixin Dokumentasi](https://sass-lang.com/documentation/at-rules/mixin)

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjana Senarai Kelas CSS Dipisahkan Koma Secara Dinamik dalam SCSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!