Dalam CSS, penggayaan boleh digunakan pada elemen HTML menggunakan kelas. Pembolehubah dalam Sass membolehkan penciptaan lembaran gaya boleh guna semula dan dinamik. Artikel ini meneroka cara untuk menetapkan pembolehubah warna Sass secara dinamik bergantung pada kelas yang digunakan pada elemen HTML.
Untuk mencapai ini, campuran Sass atau termasuk boleh digunakan. Mixin ialah coretan kod boleh guna semula yang boleh disertakan dalam bahagian berlainan lembaran gaya. Termasuk, sebaliknya, membenarkan untuk mengimport fail CSS luaran ke dalam lembaran gaya semasa.
Salah satu cara untuk melaksanakan pembolehubah Sass dinamik ialah melalui termasuk. Contoh disediakan di bawah:
<code class="sass">/* _theme.scss */ section.accent { background: $accent; } .foo { border: $base; } .bar { color: $flat; }</code>
<code class="sass">/* main.scss */ html { &.sunrise { $accent: #37CCBD; $base: #3E4653; $flat: #eceef1; @import "theme"; } &.moonlight { $accent: #18c; $base: #2a2a2a; $flat: #f0f0f0; @import "theme"; } }</code>
Sebagai alternatif, mixin yang mengambil tiga argumen warna boleh ditakrifkan:
<code class="sass">@mixin theme($accent, $base, $flat) { // ... styling using the provided colors ... }</code>
Mixin ini kemudiannya boleh digunakan semula sebagai ganti termasuk, memberikan fleksibiliti dalam mengurus tema.
Dengan memanfaatkan campuran Sass atau termasuk, menetapkan pembolehubah warna secara dinamik berdasarkan kelas HTML boleh dicapai. Pendekatan ini membolehkan penciptaan lembaran gaya yang boleh disesuaikan dan boleh digunakan semula.
Atas ialah kandungan terperinci Bagaimanakah Pembolehubah Sass Boleh Ditetapkan Secara Dinamik Berdasarkan Kelas HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!