Bagaimana untuk Menjana Senarai Kelas CSS yang Dipisahkan Koma Secara Dinamik dalam SCSS?

Menjana Senarai Kelas Dipisahkan Koma Secara Dinamik dalam SCSS

Mencipta sistem grid dinamik dalam SCSS selalunya memerlukan penjanaan senarai kelas lajur yang diasingkan dengan koma. Ini memudahkan penggunaan gaya biasa merentas bilangan lajur yang berbeza-beza. Walau bagaimanapun, menulis kod sedemikian boleh mencabar.

Penciptaan Lajur Dinamik

Kod SCSS yang disediakan berjaya mencipta kelas lajur berdasarkan $columns pembolehubah. Walau bagaimanapun, menjana senarai kelas yang dipisahkan koma ini kekal sebagai halangan.

Menggunakan @extend

Daripada membuat definisi kelas individu untuk setiap lajur, pertimbangkan untuk menggunakan @ memanjangkan arahan. Dengan mentakrifkan campuran yang memanjangkan gaya terapung yang dipratakrifkan, anda boleh mencapai kesan yang diingini:

%float-styles {
  float: left;
}

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

Dalam kod ini:

• Pemegang tempat %float-styles mentakrifkan penggayaan untuk dilanjutkan.
• Senarai @mixin col-x-mencipta senarai kelas.
• Gelung @for berulang melalui nombor lajur.
• Setiap kelas memanjangkan %gaya apungan, mewarisi sifat apungannya.

Terhasil CSS

CSS yang dihasilkan menggunakan pendekatan ini akan menyerupai 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 menyediakan senarai kelas yang dipisahkan koma yang mewarisi sifat apungan daripada pemegang tempat %float-styles. Dengan memanfaatkan @extend, anda boleh memudahkan kod sambil mengekalkan fungsi yang diingini.

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