Οι περισσότερες γλώσσες προγραμματισμού υποστηρίζουν μεταβλητές. Αλλά, δυστυχώς, το CSS δεν έχει στη διάθεσή του την υποστήριξη για τις εγγενείς μεταβλητές από την αρχή.
Γράφετε CSS; Τότε δεν υπάρχουν μεταβλητές για σας. Λοιπόν, εκτός εάν χρησιμοποιούσατε έναν προεπεξεργαστή όπως ο Sass.
Προεπεξεργαστές όπως ο Sass πωλούν τη χρήση των μεταβλητών ως ένα μεγάλο add-on. Ένας λόγος να τα δοκιμάσετε. Και ξέρεις τι? Είναι ένας πολύ καλός λόγος.
Καλά ο ιστός κινείται γρήγορα. Και χαίρομαι που αναφέρω ότι το CSS υποστηρίζει τελικά τις μεταβλητές.
Ενώ οι preprocessors υποστηρίζουν πολύ περισσότερα χαρακτηριστικά, η προσθήκη μεταβλητών CSS είναι καλή. Αυτό κινεί τον ιστό ακόμη πιο κοντά στο μέλλον.
Σε αυτόν τον οδηγό, θα σας δείξω πώς οι μεταβλητές λειτουργούν εγγενώς στο CSS και πώς μπορείτε να τις χρησιμοποιήσετε για να κάνετε τη ζωή σας πολύ πιο εύκολη.
Τι θα μάθετε
Θα σας δώσω πρώτα τα βασικά στοιχεία των μεταβλητών CSS. Πιστεύω ότι κάθε αξιοπρεπής προσπάθεια κατανόησης των μεταβλητών CSS πρέπει να ξεκινήσει εδώ.
Η εκμάθηση των θεμελιωδών στοιχείων είναι δροσερή. Αυτό που είναι ακόμα πιο δροσερό είναι η εφαρμογή αυτών των βασικών στοιχείων για την κατασκευή εφαρμογών πραγματικού κόσμου.
Έτσι θα ολοκληρώσω τα πράγματα, δείχνοντάς σας πώς να χτίσετε 3 έργα που δείχνουν τις μεταβλητές CSS και την ευκολία χρήσης τους. Ακολουθεί μια γρήγορη προεπισκόπηση αυτών των 3 έργων.
Έργο 1: Δημιουργία παραλλαγών εξαρτημάτων χρησιμοποιώντας μεταβλητές CSS
Μπορεί να υπάρχουν ήδη παραλλαγές δομικών στοιχείων σήμερα. Είτε χρησιμοποιείτε React, γωνιακή είτε Vue, οι μεταβλητές CSS θα καταστήσουν τη διαδικασία αυτή απλούστερη.
Ελέγξτε το έργο στο Codepen.
Έργο 2: Στυλ μοντέλων με μεταβλητές CSS
Είναι πιθανό να το δείτε κάπου. Θα δείξω πόσο εύκολες μεταβλητές CSS κάνουν τη δημιουργία στυλ θέματος σε όλο το site.
Ελέγξτε το έργο στο Codepen.
Έργο 3: Δημιουργία του μεταβλητού περιβλήματος CSS
Αυτό είναι το τελικό σχέδιο. Δεν πειράζει το όνομα. Δεν μπορούσα να βρω ένα καλύτερο όνομα.
Παρατηρήστε πώς ενημερώνονται δυναμικά τα χρώματα των πλαισίων και πώς περιστρέφεται το δοχείο του κουτιού σε τρισδιάστατο χώρο καθώς αλλάζει η είσοδος εύρους.
Αυτό το έργο δείχνει την ευκολία ενημέρωσης των μεταβλητών CSS με το JavaScript και τα αντιδρώντα καλούδια που παίρνετε μαζί του.
Αυτό θα έχει πλάκα!
Περάστε λίγο χρόνο με τη διασκέδαση στο Codepen.
Σημείωση: Το άρθρο υποθέτει ότι έχετε καλή γνώση του CSS. Εάν δεν γνωρίζετε πολύ καλά το CSS ή θέλετε να μάθετε να δημιουργείτε UIs, προτείνουμε να πάρετε το Advanced CSS Course μου (πληρωμένο μάθημα που περιλαμβάνει 85 μαθήματα). Αυτό το άρθρο είναι ένα απόσπασμα από το μάθημα. Ραδιόφωνο>
Γιατί οι μεταβλητές είναι τόσο σημαντικές
Εάν είστε νέοι σε μεταβλητές σε προεπεξεργαστές ή σε εγγενή CSS, εδώ είναι μερικοί λόγοι για τους οποίους οι μεταβλητές είναι σημαντικές.
Λόγος # 1: Ευανάγνωστος κώδικας
Χωρίς να λέμε πολλά, μπορείτε γρήγορα να πείτε πόσο ευανάγνωστες και πιο συντηρητικές μεταβλητές κάνουν οποιαδήποτε βάση κώδικα.
Λόγος # 2: Ευκολία αλλαγής σε μεγάλα έγγραφα
Αν έχετε αποθηκεύσει όλες τις σταθερές σας σε ένα ξεχωριστό αρχείο, δεν χρειάζεται να μεταβείτε σε χιλιάδες γραμμές κώδικα όταν θέλετε να αλλάξετε μια μεταβλητή.
Γίνεται πολύ εύκολη. Απλώς το αλλάξτε σε ένα μέρος και αφήστε το.
Λόγος # 3: Μπορείτε να εντοπίσετε τυπογραφικά λάθη γρηγορότερα
Είναι ένας πόνος να ψάξετε μέσα από γραμμές κώδικα που προσπαθούν να εντοπίσουν ένα λάθος. Είναι ακόμα πιο ενοχλητικό αν το σφάλμα οφείλεται σε απλό τυπογραφικό λάθος. Είναι δύσκολο να εντοπιστούν. Η καλή χρήση των μεταβλητών εξαλείφει αυτές τις παρενοχλήσεις.
Για το σκοπό αυτό, οι αναγνωσιμότητες και η δυνατότητα συντήρησης είναι οι μεγάλες νίκες.
Χάρη στις μεταβλητές CSS, τώρα μπορούμε να τις έχουμε και με το εγγενές CSS.
Ορισμός μεταβλητών CSS
Επιτρέψτε μου να ξεκινήσω με κάτι που ίσως έχετε ήδη εξοικειωθεί με: μεταβλητές στο JavaScript.
Μια απλή μεταβλητή JavaScript μπορεί να δηλωθεί ως εξής:
var amAwesome;
και στη συνέχεια μπορείτε να εκχωρήσετε κάποια αξία, όπως έτσι:
amAwesome = "awesome string"
Στο CSS, μια μεταβλητή CSS είναι οποιαδήποτε "ιδιότητα" του οποίου το όνομα αρχίζει με δύο παύλες.
/ * μπορείτε να εντοπίσετε τη μεταβλητή εδώ; * /
.ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ {
χρώμα: # 8cacea;
--χρώμα: μπλε
}}
Στοχεύοντας μεταβλητές CSS
Υπάρχει ακόμα ένα πράγμα για να δείξετε την προσοχή σας.
Να θυμάστε ότι στο JavaScript, οι μεταβλητές έχουν πεδίο εφαρμογής. Μπορούν είτε να έχουν παγκόσμιο είτε τοπικό πεδίο εφαρμογής.
Το ίδιο μπορεί να ειπωθεί για μεταβλητές CSS.
Εξετάστε το παρακάτω παράδειγμα:
: root {
- βασικό χρώμα: κόκκινο
}}
Ο επιλογέας ρίζας σάς επιτρέπει να στοχεύσετε το στοιχείο υψηλότερου επιπέδου στο DOM ή στο δέντρο εγγράφων.
Έτσι, οι μεταβλητές που δηλώνονται κατ 'αυτόν τον τρόπο είναι είδος που καλύπτει το παγκόσμιο πεδίο εφαρμογής.
Το κατάλαβα?
Παράδειγμα 1
Υποθέτοντας ότι θέλετε να δημιουργήσετε μια μεταβλητή CSS που να αποθηκεύει το πρωτεύον χρώμα ενός θεματικού ιστότοπου.
Πώς θα έλεγες αυτό;
Μπορείτε να δημιουργήσετε τον επιλογέα. Χρήση: root για μια μεταβλητή 'global'
: root {
}}
2. Καθορίστε τη μεταβλητή
: root {
- αρχικό χρώμα: κόκκινο
}}
Να θυμάστε ότι μια μεταβλητή CSS είναι οποιαδήποτε "ιδιότητα" του οποίου το όνομα αρχίζει με δύο παύλες π.χ. --color
Αυτό ήταν απλό.
Χρήση μεταβλητών CSS
Μόλις μια μεταβλητή έχει οριστεί και εκχωρηθεί μια τιμή, μπορείτε να προχωρήσετε και να την χρησιμοποιήσετε σε μια τιμή ιδιοκτησίας.
Υπάρχει λίγο ένα gotcha όμως.
Αν έρχεστε από τον κόσμο των preprocessors, πρέπει να συνηθίσετε να χρησιμοποιείτε μια μεταβλητή απλά αναφέροντας το όνομά της. Για παράδειγμα:
$ font-size: 20px
.test {
μέγεθος γραμματοσειράς: $ font-size
}}
Με τις φυσικές μεταβλητές CSS, τα πράγματα είναι λίγο διαφορετικά. Αναφέρετε μια μεταβλητή χρησιμοποιώντας τη λειτουργία var ().
Με το παραπάνω παράδειγμα, η χρήση μεταβλητών CSS θα αποφέρει αυτό:
: root {
--font-μέγεθος: 20px
}}
.test {
μέγεθος γραμματοσειράς: var (- μέγεθος γραμματοσειράς)
}}
Αρκετά διαφορετικό.
Μόλις το ξεπεράσετε, θα αρχίσετε να αγαπάτε τις μεταβλητές CSS - πολλά!
Μια άλλη σημαντική σημείωση είναι ότι, αντίθετα από τις μεταβλητές στο Sass (ή σε άλλους προεπεξεργαστές) - όπου μπορείτε να χρησιμοποιήσετε τις μεταβλητές σε πολλά μέρη και να κάνετε μαθηματικά όπως θέλετε - πρέπει να είστε προσεκτικοί με τις μεταβλητές CSS. Θα τις έχετε ως κύριες αξίες.
/*αυτό είναι λάθος*/
.περιθώριο {
- πλευρά: περιθώριο - κορυφή.
var (- πλευρά): 20px;
}}
Δεν μπορείτε επίσης να κάνετε μαθηματικά. Χρειάζεται τη λειτουργία CSS calc () για αυτό. Θα συζητήσω παραδείγματα καθώς θα προχωρήσουμε.
/*αυτό είναι λάθος */
.περιθώριο {
--space: 20px * 2;
μέγεθος γραμματοσειράς: var (- διάστημα); // όχι 40px
}}
Αν πρέπει να κάνετε μαθηματικά, τότε χρησιμοποιήστε τη λειτουργία calc () ως εξής:
.περιθώριο {
--space: calc (20px * 2).
μέγεθος γραμματοσειράς: var (- διάστημα); / * ισούται με 40px * /
}}
Ιδιότητες που αξίζει να αναφέρουμε
Ακολουθούν μερικές συμπεριφορές που αξίζει να αναφερθούν.
1. Οι προσαρμοσμένες ιδιότητες είναι συνήθεις ιδιότητες, έτσι ώστε να μπορούν να δηλωθούν σε οποιοδήποτε στοιχείο.
Δηλώστε τους σε ένα στοιχείο παραγράφου, τμήμα, κατά μέρος, ρίζα ή ακόμα και ψευδο στοιχεία. Θα λειτουργούν όπως αναμένεται.
2. Οι μεταβλητές CSS επιλύονται με τους κανονικούς κανόνες κληρονομίας και καταρράκτη
Εξετάστε το παρακάτω μπλοκ κώδικα:
div {
--χρώμα: κόκκινο;
}}
div.test {
χρώμα: var (- χρώμα)
}}
div.ew {
χρώμα: var (- χρώμα)
}}
Όπως και με τις κανονικές μεταβλητές, η τιμή -color θα κληρονομηθεί από τα divs.
3. Οι μεταβλητές CSS μπορούν να γίνουν υπό όρους με το @media και άλλους υπό όρους κανόνες
Όπως και με άλλες ιδιότητες, μπορείτε να αλλάξετε την τιμή μιας μεταβλητής CSS σε ένα μπλοκ @media ή σε άλλους όρους υπό όρους.
Για παράδειγμα, ο παρακάτω κώδικας αλλάζει την τιμή της μεταβλητής, υδρορροή σε μεγαλύτερες συσκευές.
4. Οι μεταβλητές CSS μπορούν να χρησιμοποιηθούν στο χαρακτηριστικό στυλ HTML.
Μπορείτε να επιλέξετε να ορίσετε την τιμή των μεταβλητών σας σε σειρά και θα συνεχίσουν να λειτουργούν όπως αναμένεται.
σώμα {
χρώμα: var (- χρώμα)
}}
Στις μεταβλητές CSS γίνεται διάκριση πεζών-κεφαλαίων. Να είστε προσεκτικοί με αυτό. Εξοικονομούμε τον εαυτό μου τις πιέσεις και γράφω τις μεταβλητές με πεζά. Η διανυόμενη απόσταση μπορεί να διαφέρει.
/ * πρόκειται για δύο διαφορετικές μεταβλητές * /
: root {
--χρώμα: μπλε.
- COLOR: κόκκινο;
}}
Επίλυση πολλαπλών δηλώσεων
Όπως και με άλλες ιδιότητες, οι πολλαπλές δηλώσεις επιλύονται με τον τυπικό καταρράκτη.
Ας δούμε ένα παράδειγμα:
/ * ορίστε τις μεταβλητές * /
: ρίζα {--color: μπλε; }}
div {--color: πράσινο; }}
#alert {--color: κόκκινο; }}
/ * χρησιμοποιήστε τη μεταβλητή * /
* {χρώμα: var (- χρώμα); }}
Με τις μεταβλητές δηλώσεις παραπάνω, ποιο θα είναι το χρώμα των παρακάτω στοιχείων;
Ποιο είναι το χρώμα μου; p>
και εγώ; div>
Ποιο είναι και το χρώμα μου;
χρώμα; p>
div>
Μπορείτε να το καταλάβετε;
Η πρώτη παράγραφος θα είναι μπλε. Δεν υπάρχει άμεσος καθορισμός χρωμάτων σε έναν επιλογέα p, έτσι κληρονομεί την τιμή από: root
: ρίζα {--color: μπλε; }}
Το πρώτο div θα είναι πράσινο. Αυτό είναι αρκετά σαφές. Υπάρχει ένας άμεσος μεταβλητός ορισμός που έχει οριστεί στο div
div {--color: πράσινο; }}
Το div με την ταυτότητα ειδοποίησης ΔΕΝ θα είναι πράσινο. Θα είναι κόκκινο
#alert {--color: κόκκινο; }}
Το αναγνωριστικό έχει άμεση μεταβλητή οριοθέτηση. Ως εκ τούτου, η αξία εντός του ορισμού θα υπερισχύει των άλλων. Ο επιλογέας #alert είναι πιο συγκεκριμένος.
Τέλος, το p στο #alert θα είναι ... κόκκινο
Δεν υπάρχει μεταβλητή δήλωση στο στοιχείο της παραγράφου. Μπορεί να περίμενε κανείς ότι το χρώμα είναι μπλε λόγω της δήλωσης στο στοιχείο ρίζας.
: ρίζα {--color: μπλε; }}
Όπως και με άλλες ιδιότητες, οι μεταβλητές CSS κληρονομούνται. Η τιμή κληρονομείται από τον γονέα #alert
#alert {--color: κόκκινο; }}
Επίλυση κυκλικών εξαρτήσεων
Μια κυκλική εξάρτηση συμβαίνει με τους ακόλουθους τρόπους:
Όταν μια μεταβλητή εξαρτάται από τον εαυτό της. Δηλαδή, χρησιμοποιεί var () που αναφέρεται στον εαυτό του.
: root {
- m: var (- m)
}}
σώμα {
περιθώριο: var (- m)
}}
2. Όταν δύο ή περισσότερες μεταβλητές αναφέρονται μεταξύ τους.
Προσέξτε να μην δημιουργήσετε κυκλικές εξαρτήσεις μέσα στον κώδικα σας.
Τι συμβαίνει με μη έγκυρες μεταβλητές;
Τα σφάλματα σύνταξης απορρίπτονται, αλλά οι μη έγκυρες υποκαταστάσεις var () προεπιλεγμένες είτε στην αρχική είτε στην κληρονομημένη τιμή της συγκεκριμένης ιδιότητας.
Σκέψου τα ακόλουθα:
: ρίζα {--color: 20px; }}
p {φόντο-χρώμα: κόκκινο; }}
p {φόντο-χρώμα: var (- χρώμα); }}
Όπως αναμένεται, --color αντικαθίσταται στο var (), αλλά η τιμή ιδιότητας, το χρώμα-φόντου: 20px είναι άκυρη μετά την αντικατάσταση. Δεδομένου ότι το χρώμα φόντου δεν είναι κληρονομική ιδιότητα, η τιμή θα είναι προεπιλεγμένη στην αρχική τιμή της διαφανής.
Σημειώστε ότι αν είχατε γράψει χρώμα φόντου: 20px χωρίς μεταβλητά υποκατάστατα, η συγκεκριμένη δήλωση υποβάθρου θα ήταν άκυρη. Στη συνέχεια θα χρησιμοποιηθεί η προηγούμενη δήλωση.
Να είστε προσεκτικοί κατά την κατασκευή ενιαίων σημείων
Όταν ορίζετε την τιμή μιας ιδιότητας όπως υποδεικνύεται παρακάτω, το 20px ερμηνεύεται ως ένα ενιαίο διακριτικό.
μέγεθος γραμματοσειράς: 20px
Ένας απλός τρόπος για να το θέσουμε είναι ότι η τιμή 20px θεωρείται ως μία ενιαία οντότητα.
Πρέπει να είστε προσεκτικοί όταν δημιουργείτε μονές μάρκες με μεταβλητές CSS.
Για παράδειγμα, εξετάστε το ακόλουθο μπλοκ κώδικα:
: root {
- μέγεθος: 20
}}
div {
μέγεθος γραμματοσειράς: var (- μέγεθος) px / * WRONG * /
}}
Μπορεί να περίμενε κανείς ότι η τιμή του μεγέθους γραμματοσειράς θα έχει 20px, αλλά αυτό είναι λάθος.
Το πρόγραμμα περιήγησης ερμηνεύει αυτό ως 20 px
Σημειώστε το διάστημα μετά τις 20
Επομένως, εάν πρέπει να δημιουργήσετε ενιαία μάρκες, η μεταβλητή αντιπροσωπεύει ολόκληρο το διακριτικό. Για παράδειγμα, - μέγεθος: 20px, ή χρησιμοποιήστε τη λειτουργία calc π.χ. calc (var (- μέγεθος) * 1px) όπου το μέγεθος - 20
Μην ανησυχείτε αν δεν το έχετε ακόμα. Θα το εξηγήσω λεπτομερέστερα σε ένα επόμενο παράδειγμα.
Ας οικοδομήσουμε τα πράγματα!
Τώρα αυτό είναι το μέρος του άρθρου που περιμένουμε.
Θα σας καθοδηγήσω με πρακτικές εφαρμογές των εννοιών που συζητήσατε με τη δημιουργία μερικών χρήσιμων έργων.
Ας αρχίσουμε.
Έργο 1: Δημιουργία παραλλαγών εξαρτημάτων χρησιμοποιώντας μεταβλητές CSS
Εξετάστε την περίπτωση όπου πρέπει να χτίσετε δύο διαφορετικά κουμπιά. Ίδια στυλ βάσης, μόνο λίγο διαφορά.
Στην περίπτωση αυτή, οι ιδιότητες που διαφέρουν είναι το χρώμα φόντου και το χρώμα περιγράμματος της παραλλαγής.
Λοιπόν, πώς θα το κάνατε αυτό;
Εδώ είναι η τυπική λύση.
Δημιουργήστε μια κλάση βάσης, π.χ. .btn και προσθέστε τις κλάσεις παραλλαγών. Ακολουθεί ένα παράδειγμα σήμανσης:
.btn θα περιέχει τα βασικά στυλ στο κουμπί. Για παράδειγμα:
/ * στην επένδυση * /
.btn: μετακινήστε {
δρομέας: δείκτης;
φόντο: var (- χρώμα, μαύρο);
άσπρο χρώμα;
}}
Όταν το κάνετε αυτό: φόντο: var (- χρώμα, μαύρο) που λέτε, ρυθμίστε το φόντο στην τιμή της μεταβλητής --color. Ωστόσο, εάν η μεταβλητή δεν υπάρχει, χρησιμοποιήστε την προεπιλεγμένη τιμή του μαύρου
Με αυτόν τον τρόπο ρυθμίζετε τις προεπιλεγμένες τιμές μεταβλητών. Ακριβώς όπως κάνετε και σε JavaScript ή σε οποιαδήποτε άλλη γλώσσα προγραμματισμού.
Εδώ είναι το καλό μέρος.
Με τις παραλλαγές, παρέχετε μόνο τη νέα τιμή της μεταβλητής CSS ως κάτω από:
.btn.red {
--χρώμα: κόκκινο
}}
Αυτό είναι όλο. Τώρα όταν χρησιμοποιείται η κλάση .red, το πρόγραμμα περιήγησης σημειώνει τη διαφορετική τιμή μεταβλητής -color και ενημερώνει αμέσως την εμφάνιση του κουμπιού.
Αυτό είναι πραγματικά καλό αν ξοδεύετε πολύ χρόνο για την κατασκευή επαναχρησιμοποιήσιμων εξαρτημάτων.
Εδώ είναι μια παράλληλη σύγκριση:
Ω, και αν είχατε περισσότερες παραλλαγές, εξοικονομήσατε πολύ περισσότερη πληκτρολόγηση.
Έργο 2: Θεματικοί ιστότοποι με μεταβλητές CSS
Είμαι βέβαιος ότι τα συναντήσατε πριν. Οι θεματικές τοποθεσίες δίνουν στο χρήστη την αίσθηση της προσαρμογής. Όπως έχουν τον έλεγχο.
Παρακάτω είναι το βασικό παράδειγμα που θα φτιάξουμε.
Έτσι, πόσο εύκολο οι μεταβλητές CSS το κάνουν αυτό;
Θα ρίξουμε μια ματιά.
Πριν από αυτό, ήθελα να αναφέρω ότι αυτό το παράδειγμα είναι πολύ σημαντικό. Με αυτό το παράδειγμα, θα εισαγάγω την έννοια της ενημέρωσης των μεταβλητών CSS με το JavaScript.
Είναι διασκέδαση!
Θα σας αρέσει πολύ.
Αυτό που πραγματικά θέλουμε να κάνουμε.
Η ομορφιά των μεταβλητών CSS είναι η αντιδραστική φύση τους. Μόλις ενημερωθούν, όποια ιδιότητα έχει την αξία της μεταβλητής CSS ενημερώνεται επίσης.
Εννοιολογικά, εδώ είναι μια εικόνα που εξηγεί τη διαδικασία σε σχέση με το παράδειγμα στο χέρι.
Λοιπόν, χρειαζόμαστε JavaScript για τον ακροατή κλικ.
Για αυτό το απλό παράδειγμα, το φόντο και το χρώμα του κειμένου ολόκληρης της σελίδας βασίζονται στις μεταβλητές CSS.
Όταν κάνετε κλικ σε οποιοδήποτε από τα παραπάνω κουμπιά, ορίστε τη μεταβλητή CSS σε κάποιο άλλο χρώμα. Ως αποτέλεσμα αυτού, το ιστορικό της σελίδας ενημερώνεται.
Hey, αυτό είναι το μόνο που υπάρχει σε αυτό.
Ένα ακόμα πράγμα.
Όταν λέω ότι η μεταβλητή CSS έχει οριστεί σε κάποια άλλη τιμή, πώς γίνεται αυτό;
Οι μεταβλητές CSS θα τεθούν σε ισχύ ακόμα και αν έχουν οριστεί σε γραμμή. Με το JavaScript, παίρνουμε το ριζικό έγγραφο και ορίζουμε τη νέα τιμή για τη μεταβλητή CSS εν σειρά.
Το κατάλαβα?
Αυτό είναι πολύ μιλάμε - ας κάνουμε το πραγματικό πράγμα.
Η σήμανση αποτελείται από τρία κουμπιά μέσα σε ένα γονικό στοιχείο .theme. Για να κρατήσω τα πράγματα σύντομα, έχω περικόψει το περιεχόμενο μέσα στο στοιχείο του άρθρου. Εντός αυτού του άρθρου το στοιχείο είναι το περιεχόμενο της σελίδας.
Σχεδίαση της σελίδας
Η επιτυχία αυτού του έργου ξεκινάει με το στυλ της σελίδας. Το τέχνασμα είναι απλό.
Αντί να ρυθμίζουμε απλώς το χρώμα φόντου και το χρώμα της σελίδας σε πέτρα, θα τα ορίσουμε βάσει μεταβλητών.
Εδώ είναι αυτό που εννοώ.
σώμα {
φόντο-χρώμα: var (- bg, λευκό);
χρώμα: var (- bg-κείμενο, μαύρο)
}}
Ο λόγος για αυτό είναι κάπως προφανής. Κάθε φορά που κάνετε κλικ σε ένα κουμπί, θα αλλάξουμε την τιμή και των δύο μεταβλητών μέσα στο έγγραφο.
Με αυτήν την αλλαγή, το γενικό στυλ της σελίδας θα ενημερωθεί. Πανεύκολο.
Λοιπόν, ας προχωρήσουμε και να χειριστούμε την ενημέρωση από τη JavaScript.
Εισαγάγετε το JavaScript
Θα προχωρήσω και θα φτύνω όλη τη JavaScript που απαιτείται για αυτό το έργο.
Μην αφήσετε αυτό να σας τρομάξει. Είναι πολύ πιο εύκολο από ό, τι νομίζετε πιθανώς.
Καταρχάς, διατηρήστε μια αναφορά στο στοιχείο ρίζας, const root = document.documentElement
Το στοιχείο ρίζας εδώ είναι το στοιχείο HTML. Θα δείτε γιατί αυτό είναι σημαντικό σε λίγο. Αν είστε περίεργοι, χρειάζεται να ορίσετε τις νέες τιμές των μεταβλητών CSS.
Επίσης, κρατήστε μια αναφορά στα κουμπιά πάρα πολύ, const themeBtns = document.querySelectorAll ('. Theme' κουμπί ')
ο querySelectorAll παράγει μια δομή δεδομένων που μοιάζει με array που μπορούμε να βρούμε. Επανεξέταση πάνω από κάθε ένα από τα κουμπιά και να προσθέσετε έναν ακροατή του γεγονότος σε αυτά, με το πάτημα του κουμπιού.
Πού είναι η λειτουργία handleThemeUpdate; Θα το συζητήσω έπειτα.
Κάθε κουμπί που έχει πατηθεί θα έχει το handleThemeUpdate ως λειτουργία επανάκλησης. Γίνεται σημαντικό να σημειωθεί σε ποιο κουμπί έγινε κλικ και, στη συνέχεια, εκτελέστε τη σωστή λειτουργία.
Υπό το πρίσμα αυτό, χρησιμοποιείται ένας χειριστής διακόπτη και ορισμένες λειτουργίες διεξάγονται με βάση την τιμή του κουμπιού που κτυπά.
Προχωρήστε και ρίξτε μια δεύτερη ματιά στο μπλοκ κώδικα JavaScript. Θα το καταλάβετε πολύ καλύτερα τώρα.
Έργο 3: Δημιουργία του μεταβλητού περιβλήματος CSS
Σε περίπτωση που το χάσατε, δείτε τι θα χτίσουμε:
Θυμηθείτε ότι το χρώμα των πλαισίων ενημερώνεται δυναμικά και ότι το δοχείο κουτιού περιστρέφεται σε 3d χώρο καθώς αλλάζει η είσοδος περιοχής.
Μπορείτε να προχωρήσετε και να παίξετε μαζί του στο Codepen.
Αυτό είναι ένα εξαιρετικό παράδειγμα ενημέρωσης των μεταβλητών CSS με JavaScript και της αντιδραστικότητας που έρχεται μαζί του.
Ας δούμε πώς να το φτιάξουμε.
Η σήμανση
Εδώ είναι τα απαραίτητα στοιχεία.
Μια είσοδος εύρους
Ένα δοχείο για να κρατάτε τις οδηγίες
Μια ενότητα για τη διατήρηση μιας λίστας με άλλα κουτιά, όπου το καθένα περιέχει πεδία εισαγωγής