Bolehkah Pembolehubah CSS Meniru Fungsi `darken()` Sass untuk Penjanaan Lorek Warna?

Penjanaan Lorek Warna dengan Pembolehubah CSS: Kaedah Sistematik

Soalan

Bolehkah kita meniru fungsi fungsi darken() Sass menggunakan pembolehubah CSS untuk menjana warna warna yang ditentukan?

Pendekatan Menggunakan Warna Relatif Sintaks

CSS memperkenalkan "sintaks warna relatif," yang membolehkan perkara 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));
}

Begini cara ia berfungsi:

• --warna-utama: Tentukan warna asas.
• --warna-utama-gelap: Gelapkan warna asas sebanyak 5% menggunakan hsl().
• --color-primary-darkest: Gelapkan warna asas sebanyak 10% menggunakan hsl().

Penggunaan

Gunakan pembolehubah ini untuk elemen gaya:

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

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

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

Pendekatan ini membolehkan anda menentukan rona warna secara dinamik tanpa mengubah suai warna berubah-ubah, mencapai kesan kecerunan yang diingini dengan tiga warna.

Atas ialah kandungan terperinci Bolehkah Pembolehubah CSS Meniru Fungsi `darken()` Sass untuk Penjanaan Lorek Warna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!