Rumah > Artikel > hujung hadapan web > Bagaimana Menggayakan Elemen HTML Secara Dinamik dengan Pembolehubah Sass: Termasuk vs Campuran?
Menggayakan Elemen HTML Secara Dinamik dengan Pembolehubah Sass
Senario:
Anda mahu menetapkan dinamik pembolehubah warna kepada elemen HTML berdasarkan kelasnya.
Penyelesaian:
Sass menyediakan dua kaedah untuk mencapai ini:
1. Menggunakan Termasuk
Buat fail "_theme.scss" yang berasingan dengan kod berikut:
<code class="scss">section.accent { background: $accent; } .foo { border: $base; } .bar { color: $flat; }</code>
Dalam fail Sass utama anda, import fail "_theme.scss" dalam Blok pemilih "&":
<code class="scss">html { &.sunrise { $accent: #37CCBD; $base: #3E4653; $flat: #eceef1; @import "theme"; } &.moonlight { $accent: #18c; $base: #2a2a2a; $flat: #f0f0f0; @import "theme"; } }</code>
2. Menggunakan Mixin
Tentukan campuran "_theme" yang mengambil tiga argumen warna:
<code class="scss">@mixin theme($accent, $base, $flat) { // Sass code to style the elements }</code>
Kemudian, gunakan mixin pada pemilih kelas yang berbeza dalam blok "&":
<code class="scss">html { &.sunrise { @include theme(#37CCBD, #3E4653, #eceef1); } &.moonlight { @include theme(#18c, #2a2a2a, #f0f0f0); } }</code>
Kedua-dua kaedah membolehkan anda menukar warna unsur secara dinamik berdasarkan kelas yang mereka miliki.
Atas ialah kandungan terperinci Bagaimana Menggayakan Elemen HTML Secara Dinamik dengan Pembolehubah Sass: Termasuk vs Campuran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!