Ένα φύλλο εργασίας για να σας βοηθήσει να θυμάστε τις προσαρμοσμένες ιδιότητες CSS

Οι προσαρμοσμένες ιδιότητες CSS, επίσης γνωστές ως μεταβλητές CSS, αντιπροσωπεύουν προσαρμοσμένες ιδιότητες που μπορούν να δηλωθούν και να κληθούν στο CSS σας.

Δηλώστε μια προσαρμοσμένη ιδιότητα σε CSS

Για να δηλώσετε μια προσαρμοσμένη ιδιότητα στο CSS σας, πρέπει να χρησιμοποιήσετε τη --σύνταξη:

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

Παρατηρήστε τον :rootψευδο-επιλογέα κατηγορίας - μπορούμε να δηλώσουμε τις μεταβλητές μας παγκοσμίως. Μπορούμε επίσης να τους δηλώσουμε χρησιμοποιώντας άλλους επιλογείς και στη συνέχεια θα περιληφθούν σε αυτούς.

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

Χρησιμοποιήστε μια προσαρμοσμένη ιδιότητα στο CSS

Για να χρησιμοποιήσετε μια προσαρμοσμένη ιδιότητα CSS στο CSS σας, μπορείτε να χρησιμοποιήσετε τη var()συνάρτηση:

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

Σε αυτήν την περίπτωση, bodyθα έχει χρώμα φόντου tomato, αλλά body.theme-darkαπό lime.

Χρησιμοποιήστε προσαρμοσμένες ιδιότητες χωρίς μονάδες

Οι προσαρμοσμένες ιδιότητες CSS μπορούν να δηλωθούν χωρίς μονάδες εάν χρησιμοποιούνται με τη calc()συνάρτηση.

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

Χρησιμοποιήστε προσαρμοσμένες ιδιότητες με JavaScript

Για να αποκτήσουμε μια προσαρμοσμένη ιδιότητα, μπορούμε να χρησιμοποιήσουμε τα ακόλουθα:

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

Για να ενημερώσετε την προσαρμοσμένη τιμή ιδιότητας:

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

Παράδειγμα λήψης και αντικατάστασης τιμών:

Στο παρακάτω παράδειγμα, χρησιμοποιούμε τη βιβλιοθήκη ελεγκτών dat.gui για να αλλάξουμε την τιμή των προσαρμοσμένων ιδιοτήτων --scenePerspective, --cubeRotateY και --cubeRotateX. Αυτή η μέθοδος διευκολύνει την εφαρμογή ενός νέου στυλ, καθώς δεν χρειάζεται να εφαρμόζετε ενσωματωμένο στυλ σε κάθε στοιχείο DOM.

Ευχαριστώ για την ανάγνωση!

Πόροι

Καθορισμός προσαρμοσμένων ιδιοτήτων: η οικογένεια ιδιοτήτων - *

Προσαρμοσμένες ιδιότητες: μεταβλητές CSS - MDN

var () - MDN

Χρήση προσαρμοσμένων ιδιοτήτων CSS (μεταβλητές) - MDN

Μπορείτε να διαβάσετε περισσότερα από τα άρθρα μου στο ιστολόγιό μου.