Bagaimana untuk Menjana Kelas CSS Dipisahkan Koma Secara Dinamik dalam SASS?

Menjana Senarai Kelas Dipisahkan Koma Secara Dinamik

Dalam SASS, mencipta sistem grid dinamik dan boleh dikonfigurasikan boleh mencabar. Satu halangan sedemikian ialah menjana senarai kelas lajur yang dipisahkan koma secara dinamik berdasarkan bilangan lajur yang ditakrifkan.

Untuk mencapai matlamat ini, kami boleh menggunakan campuran @extend. Begini caranya:

$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 SCSS ini mencapai perkara berikut:

• Mentakrifkan pembolehubah $lajur untuk menentukan bilangan lajur.
• Mencipta gaya ruang letak peraturan helaian %gaya apungan yang mentakrifkan sifat yang diingini untuk lajur kelas.
• Menggunakan @mixin col-x-list untuk melingkari setiap lajur dan menggunakan gaya yang ditentukan padanya.
• Memasukkan gabungan col-x-list untuk menjana senarai yang diingini kelas.

Pendekatan ini menghasilkan output CSS seperti 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;
}

Ini output memberikan anda senarai kelas lajur dipisahkan koma yang dijana secara dinamik yang boleh digunakan pada sistem grid anda.

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