Bagaimanakah Saya Boleh Menjana Senarai Kelas Dipisahkan Koma Secara Dinamik dalam SCSS untuk Sistem Grid?

Senarai Kelas Dipisahkan Koma Secara Dinamik dalam SCSS

Dalam SCSS, membina sistem grid secara dinamik boleh terbukti mencabar, terutamanya apabila ingin menjana senarai kelas lajur yang dipisahkan koma. Untuk mengatasi halangan ini, konsep @extend memegang kuncinya.

Untuk memulakan, tentukan mixin bernama col-x-list dan gunakan gelung @for untuk lelaran melalui bilangan lajur yang dikehendaki. Dalam gelung ini, cipta peraturan kelas untuk setiap lajur, menggunakan campuran seperti %float-styles untuk mengawal penggayaan. Guna @extend untuk mewarisi campuran %float-styles, membolehkan kelas berkongsi sifatnya.

Sebagai contoh, pertimbangkan kod berikut:

$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;

Kod ini akan menjana CSS berikut :

.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 menjana kelas dipisahkan koma secara dinamik senarai, membolehkan lebih fleksibiliti dan kecekapan apabila mencipta sistem grid dinamik dalam SCSS.

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