Bagaimanakah Saya Boleh Menjana Warna Warna CSS Menggunakan Pembolehubah Seperti Fungsi `darken()` Sass?

Menggunakan Pembolehubah CSS untuk Mencipta Warna Warna (Seperti Sass's darken() Fungsi)

Dalam CSS, adalah mungkin untuk menentukan pembolehubah warna utama dan menjana warna secara automatik untuk tuding, fokus dan keadaan aktif. Begini caranya:

Mentakrifkan Pembolehubah Warna Utama:

:root {
  --color-primary: #f00;
}

Menggunakan Sintaks Warna Relatif untuk Menggelapkan Warna Utama:

Spesifikasi CSS memperkenalkan "sintaks warna relatif," yang membolehkan kami memanipulasi warna menggunakan persamaan. Untuk menggelapkan warna utama sebanyak 5%:

--color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));

Begitu juga, untuk menggelapkan warna utama sebanyak 10%:

--color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));

Memohon Warna Warna:

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

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

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

Dengan mentakrifkan warna primer sebagai pembolehubah, kini kita boleh mengubah suainya dengan mudah dan menjana secara automatik warna untuk pelbagai negeri. Pendekatan ini menyediakan cara yang lebih boleh diselenggara dan cekap untuk mencipta variasi warna berbanding menggunakan kelas warna yang berasingan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjana Warna Warna CSS Menggunakan Pembolehubah Seperti Fungsi `darken()` Sass?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!