Lembaran cheatsheet untuk membantu anda mengingati sifat tersuai CSS

Properti khusus CSS, juga dikenal sebagai pemboleh ubah CSS, mewakili sifat khusus yang dapat dinyatakan dan dipanggil dalam CSS anda.

Menyatakan harta tersuai di CSS

Untuk menyatakan harta Custom di CSS anda, anda perlu menggunakan --sintaks:

:root { --colorPrimary: hsla(360, 100%, 74%, 0.6); }

Perhatikan :rootpemilih kelas pseudo - kita dapat menyatakan pemboleh ubah kita secara global menggunakannya. Kami juga boleh menyatakannya menggunakan pemilih lain, dan kemudian mereka akan terpilih.

.theme-dark { --colorPrimary: hsla(360, 100%, 24%, 0.6); }

Gunakan harta tersuai di CSS

Untuk menggunakan sifat khusus CSS di CSS anda, anda dapat menggunakan var()fungsi:

:root { --colorPrimary: tomato; } .theme-dark { --colorPrimary: lime; } body { background-color: var(--colorPrimary); }

Dalam kes ini, bodyakan mempunyai warna latar belakang tomato, tetapi body.theme-darkdaripada lime.

Gunakan sifat khusus tanpa unit

Sifat khusus CSS dapat dinyatakan tanpa unit jika digunakan dengan calc()fungsi tersebut.

:root { --spacing: 2; } .container { padding: var(--spacing) px; /*Doesn't Work ?*/ padding: calc(var(--spacing) * 1rem); /*Will output 2rem ?*/ }

Gunakan sifat tersuai dengan JavaScript

Untuk mendapatkan harta tersuai, kita dapat menggunakan yang berikut:

getComputedStyle(element).getPropertyValue("--my-var"); // Or if inline element.style.getPropertyValue("--my-var");

Untuk mengemas kini nilai harta tanah tersuai:

element.style.setProperty("--my-var", newVal);

Contoh mendapatkan dan menggantikan nilai:

Dalam contoh berikut, kami menggunakan perpustakaan pengawal dat.gui untuk mengubah nilai sifat adat --scenePerspective, --cubeRotateY, dan --cubeRotateX. Kaedah ini menjadikannya lebih mudah untuk menerapkan gaya baru, kerana anda tidak perlu menerapkan gaya sebaris pada setiap elemen DOM.

Terima kasih untuk membaca!

Sumber

Mendefinisikan Properti Khusus: keluarga - * harta tanah

Sifat tersuai: pemboleh ubah CSS - MDN

var () - MDN

Menggunakan sifat tersuai CSS (pemboleh ubah) - MDN

Anda boleh membaca lebih banyak artikel saya di blog saya.