Bagaimana Saya Boleh Menjana Warna Warna CSS Hanya Menggunakan Pembolehubah CSS?

Penjanaan Lorek Warna CSS menggunakan Pembolehubah CSS

Dalam bidang pembangunan web, elemen penggayaan dengan skema warna yang konsisten adalah penting. Pembolehubah CSS menawarkan cara yang mudah untuk menentukan warna dan menggunakannya semula sepanjang kod anda. Satu keperluan biasa ialah keupayaan untuk mencipta variasi warna asas untuk keadaan yang berbeza, seperti fokus atau keadaan aktif.

Pertimbangkan senario ini: anda telah menentukan pembolehubah CSS bernama "--color-primary" sebagai # f00. Untuk mencipta rona warna ini serupa dengan fungsi "darken()" dalam Sass, anda boleh menggunakan pendekatan berikut:

:root {
  --color-primary: #f00;
  --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));
  --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));
}

.button {
  background: var(--color-primary);

  &:hover,
  &:focus {
    background: var(--color-primary-darker);
  }

  &:active {
    background: var(--color-primary-darkest);
  }
}

Dalam kod ini:

• Pembolehubah " --color-primary" mentakrifkan warna asas.
• Pembolehubah "--color-primary-darker" dan "--color-primary-darkest" menggunakan fungsi "hsl()" untuk menjana warna dengan melaraskan kecerahan (l) warna asas sebanyak 5% dan 10%, masing-masing.
• Butang ". " elemen menggunakan pembolehubah ini untuk menetapkan warna yang sesuai berdasarkan keadaannya.

Pendekatan ini menyediakan penyelesaian yang elegan untuk menukar warna warna secara dinamik menggunakan pembolehubah CSS. Ia menghapuskan keperluan untuk fungsi Sass yang kompleks dan membolehkan penggayaan elemen web anda yang lebih cekap.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menjana Warna Warna CSS Hanya Menggunakan Pembolehubah CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!