Bagaimana untuk Menjana Kelas Lajur Dipisahkan Koma secara Dinamik dalam SCSS?

Senarai Kelas Lajur Menjana Secara Dinamik dengan Pemisahan Koma

Ini adalah senario biasa dalam sistem grid untuk menjana senarai dinamik kelas lajur berdasarkan bilangan lajur yang diberikan. SCSS, lanjutan CSS, menyediakan penyelesaian yang berkuasa untuk senario sedemikian. Walau bagaimanapun, sukar untuk mencapai senarai kelas yang dipisahkan koma yang dikehendaki.

Untuk membuat senarai kelas lajur dinamik dengan koma yang memisahkannya, anda boleh memanfaatkan arahan @extend yang berkuasa dalam SCSS. Begini caranya:

1. Tentukan kelas pemegang tempat dengan gaya yang diingini:

%float-styles {
  float: left;
}

2. Buat campuran yang menggunakan @extend untuk menggunakan gaya tersebut pada kelas lajur yang dijana:

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

3. Panggil mixin untuk menjana kelas lajur:

@include col-x-list;

4. Takrifkan $lajur dengan bilangan lajur yang dikehendaki:

$columns: 12;

Pendekatan ini akan menghasilkan koma- senarai kelas lajur yang dipisahkan dengan gaya apungan yang diingini, seperti:

.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;
}

Dengan menggunakan @extend, anda boleh menggunakan gaya secara berkesan daripada satu pemilih kepada pemilih yang lain, membantu anda mencapai senarai kelas lajur yang dijana secara dinamik dengan pertindihan kod yang minimum.

Atas ialah kandungan terperinci Bagaimana untuk Menjana Kelas Lajur Dipisahkan Koma secara Dinamik dalam SCSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!