Bagaimanakah saya boleh menetapkan pembolehubah warna Sass secara dinamik berdasarkan kelas elemen HTML?

Mengkonfigurasi Pembolehubah Sass Dinamik Berdasarkan Kelas Elemen HTML

Soalan: Bolehkah saya menetapkan pembolehubah warna Sass secara dinamik berdasarkan kelas yang digunakan pada elemen HTML ?

Jawapan: Ya, anda boleh mencapai ini melalui penggunaan Sass includes atau mixin.

Menggunakan Termasuk

Dalam fail berasingan (_theme .scss), tentukan gaya menggunakan pembolehubah Sass anda:

<code class="scss">section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}</code>

Dalam fail Sass utama anda (main.scss), import termasuk berdasarkan kelas pada elemen HTML:

<code class="scss">html {
  &amp;.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

  &amp;.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @import "theme";
 }
}</code>

Menggunakan Mixin

Sebagai alternatif, anda boleh mencipta mixin yang mengambil warna sebagai argumen:

<code class="scss">@mixin theme($accent, $base, $flat) {
    // Define styles using the passed variables
}</code>

Dalam fail Sass utama anda, gunakan mixin dengan warna yang sesuai:

<code class="scss">html {
  &amp;.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @include theme($accent, $base, $flat);
  }

  &amp;.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @include theme($accent, $base, $flat);
 }
}</code>

Pendekatan ini membolehkan anda menggunakan tema yang berbeza pada elemen HTML secara dinamik berdasarkan kelasnya.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menetapkan pembolehubah warna Sass secara dinamik berdasarkan kelas elemen HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!