Bagaimanakah Saya Boleh Mencipta Warna Warna CSS Menggunakan Pembolehubah dan Sintaks Warna Relatif?

Mencipta Warna Warna CSS dengan Pembolehubah

Mencapai kefungsian fungsi darken() Sass dalam pembolehubah CSS boleh dilakukan melalui sintaks warna relatif baharu .

Tentukan pembolehubah warna primer (--warna-utama) menggunakan mana-mana yang dikehendaki format. Untuk setiap warna, gunakan fungsi hsl() dan calc() untuk melaraskan komponen kecerahan (l) warna primer. Contohnya, untuk mencipta rona gelap 5%:

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

Begitu juga, buat rona 10% lebih gelap:

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

Tetapkan --warna-utama kepada latar belakang elemen. Kemudian, gunakan --color-primary-darker dan --color-primary-darkes pada keadaan tuding, fokus dan aktif.

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

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

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

Pendekatan ini memberikan fleksibiliti dalam menentukan rona warna dan memudahkan proses mencipta skema warna yang konsisten dalam sistem pembolehubah CSS.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Warna Warna CSS Menggunakan Pembolehubah dan Sintaks Warna Relatif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!