Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menjana Warna Warna CSS Menggunakan Pembolehubah Seperti Fungsi `darken()` Sass?

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

DDD
DDDasal
2025-01-03 03:22:38893semak imbas

How Can I Generate CSS Color Shades Using Variables Like Sass's `darken()` Function?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn