Όλα όσα πρέπει να γνωρίζετε για μεταβλητές CSS

Οι περισσότερες γλώσσες προγραμματισμού υποστηρίζουν μεταβλητές. Αλλά, δυστυχώς, το 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 που να αποθηκεύει το πρωτεύον χρώμα ενός θεματικού ιστότοπου.

Πώς θα έλεγες αυτό;

1. Μπορείτε να δημιουργήσετε τον επιλογέα. Χρήση: 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 ή σε άλλους όρους υπό όρους.

Για παράδειγμα, ο παρακάτω κώδικας αλλάζει την τιμή της μεταβλητής, υδρορροή σε μεγαλύτερες συσκευές.

: root {
 --gutter: 10px
}}

@media screen και (min-width: 768px) {
    --gutter: 30px
}}

4. Οι μεταβλητές CSS μπορούν να χρησιμοποιηθούν στο χαρακτηριστικό στυλ HTML.

Μπορείτε να επιλέξετε να ορίσετε την τιμή των μεταβλητών σας σε σειρά και θα συνεχίσουν να λειτουργούν όπως αναμένεται.

σώμα {
  χρώμα: var (- χρώμα)
}}

Στις μεταβλητές CSS γίνεται διάκριση πεζών-κεφαλαίων. Να είστε προσεκτικοί με αυτό. Εξοικονομούμε τον εαυτό μου τις πιέσεις και γράφω τις μεταβλητές με πεζά. Η διανυόμενη απόσταση μπορεί να διαφέρει.

/ * πρόκειται για δύο διαφορετικές μεταβλητές * /
: root {
 --χρώμα: μπλε.
- COLOR: κόκκινο;
}}

Επίλυση πολλαπλών δηλώσεων

Όπως και με άλλες ιδιότητες, οι πολλαπλές δηλώσεις επιλύονται με τον τυπικό καταρράκτη.

Ας δούμε ένα παράδειγμα:

/ * ορίστε τις μεταβλητές * /
: ρίζα {--color: μπλε; }}
div {--color: πράσινο; }}
#alert {--color: κόκκινο; }}

/ * χρησιμοποιήστε τη μεταβλητή * /
* {χρώμα: var (- χρώμα); }}

Με τις μεταβλητές δηλώσεις παραπάνω, ποιο θα είναι το χρώμα των παρακάτω στοιχείων;

 Ποιο είναι το χρώμα μου; 
 και εγώ; 

  Ποιο είναι και το χρώμα μου;
  
 χρώμα; 

Μπορείτε να το καταλάβετε;

Η πρώτη παράγραφος θα είναι μπλε. Δεν υπάρχει άμεσος καθορισμός χρωμάτων σε έναν επιλογέα p, έτσι κληρονομεί την τιμή από: root

: ρίζα {--color: μπλε; }}

Το πρώτο div θα είναι πράσινο. Αυτό είναι αρκετά σαφές. Υπάρχει ένας άμεσος μεταβλητός ορισμός που έχει οριστεί στο div

div {--color: πράσινο; }}

Το div με την ταυτότητα ειδοποίησης ΔΕΝ θα είναι πράσινο. Θα είναι κόκκινο

#alert {--color: κόκκινο; }}

Το αναγνωριστικό έχει άμεση μεταβλητή οριοθέτηση. Ως εκ τούτου, η αξία εντός του ορισμού θα υπερισχύει των άλλων. Ο επιλογέας #alert είναι πιο συγκεκριμένος.

Τέλος, το p στο #alert θα είναι ... κόκκινο

Δεν υπάρχει μεταβλητή δήλωση στο στοιχείο της παραγράφου. Μπορεί να περίμενε κανείς ότι το χρώμα είναι μπλε λόγω της δήλωσης στο στοιχείο ρίζας.

: ρίζα {--color: μπλε; }}

Όπως και με άλλες ιδιότητες, οι μεταβλητές CSS κληρονομούνται. Η τιμή κληρονομείται από τον γονέα #alert

#alert {--color: κόκκινο; }}

Επίλυση κυκλικών εξαρτήσεων

Μια κυκλική εξάρτηση συμβαίνει με τους ακόλουθους τρόπους:

1. Όταν μια μεταβλητή εξαρτάται από τον εαυτό της. Δηλαδή, χρησιμοποιεί var () που αναφέρεται στον εαυτό του.

: root {
  - m: var (- m)
}}

σώμα {
  περιθώριο: var (- m)
}}

2. Όταν δύο ή περισσότερες μεταβλητές αναφέρονται μεταξύ τους.

: root {
  --one: calc (var (- δύο) + 10px).
  --two: calc (var (- ένα) - 10px);
}}

Προσέξτε να μην δημιουργήσετε κυκλικές εξαρτήσεις μέσα στον κώδικα σας.

Τι συμβαίνει με μη έγκυρες μεταβλητές;

Τα σφάλματα σύνταξης απορρίπτονται, αλλά οι μη έγκυρες υποκαταστάσεις 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 και προσθέστε τις κλάσεις παραλλαγών. Ακολουθεί ένα παράδειγμα σήμανσης:

 Hello 
 Hello 

.btn θα περιέχει τα βασικά στυλ στο κουμπί. Για παράδειγμα:

.btn {
  padding: 2rem 4rem;
  σύνορα: 2χλ.
  υπόβαθρο: διαφανές.
  μέγεθος γραμματοσειράς: 0,6em;
  ακτίνα ακτίνων: 2px;
}}

/ * στην επένδυση * /
.btn: μετακινήστε {
  δρομέας: δείκτης;
  φόντο: μαύρο;
  άσπρο χρώμα;
}}

Έτσι, πού έρχεται η παραλλαγή;

Εδώ:

/ * παραλλαγές * /

.btn.red {
  border-χρώμα: κόκκινο
}}
.btn.red: μετακινήστε {
  φόντο: κόκκινο
}}

Βλέπετε πώς διπλώνουμε τον κώδικα εδώ και εκεί; Αυτό είναι καλό, αλλά θα μπορούσαμε να το βελτιώσουμε με μεταβλητές CSS.

Ποιο είναι το πρώτο βήμα;

Αντικαταστήστε τα διαφορετικά χρώματα με μεταβλητές CSS και μην ξεχάσετε να προσθέσετε προεπιλεγμένες τιμές για τις μεταβλητές!

.btn {
   padding: 2rem 4rem;
   σύνορα: 2px solid var (- χρώμα, μαύρο);
   υπόβαθρο: διαφανές.
   μέγεθος γραμματοσειράς: 0,6em;
   ακτίνα ακτίνων: 2px;
 }}

 / * στην επένδυση * /
 .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 εν σειρά.

Το κατάλαβα?

Αυτό είναι πολύ μιλάμε - ας κάνουμε το πραγματικό πράγμα.

Η αρχική σήμανση

Η αρχική σήμανση που απαιτείται είναι η εξής:

   σκούρο 
   ηρεμία 
   light 



...

Η σήμανση αποτελείται από τρία κουμπιά μέσα σε ένα γονικό στοιχείο .theme. Για να κρατήσω τα πράγματα σύντομα, έχω περικόψει το περιεχόμενο μέσα στο στοιχείο του άρθρου. Εντός αυτού του άρθρου το στοιχείο είναι το περιεχόμενο της σελίδας.

Σχεδίαση της σελίδας

Η επιτυχία αυτού του έργου ξεκινάει με το στυλ της σελίδας. Το τέχνασμα είναι απλό.

Αντί να ρυθμίζουμε απλώς το χρώμα φόντου και το χρώμα της σελίδας σε πέτρα, θα τα ορίσουμε βάσει μεταβλητών.

Εδώ είναι αυτό που εννοώ.

σώμα {
  φόντο-χρώμα: var (- bg, λευκό);
  χρώμα: var (- bg-κείμενο, μαύρο)
}}

Ο λόγος για αυτό είναι κάπως προφανής. Κάθε φορά που κάνετε κλικ σε ένα κουμπί, θα αλλάξουμε την τιμή και των δύο μεταβλητών μέσα στο έγγραφο.

Με αυτήν την αλλαγή, το γενικό στυλ της σελίδας θα ενημερωθεί. Πανεύκολο.

Λοιπόν, ας προχωρήσουμε και να χειριστούμε την ενημέρωση από τη JavaScript.

Εισαγάγετε το JavaScript

Θα προχωρήσω και θα φτύνω όλη τη JavaScript που απαιτείται για αυτό το έργο.

const ρίζα = document.documentElement
const themeBtns = document.querySelectorAll (κουμπί '. θέμα')

themeBtns.forEach ((btn) => {
  btn.addEventListener ('κλικ', handleThemeUpdate)
})

λειτουργία handleThemeUpdate (e) {
  διακόπτης (e.target.value) {
    περίπτωση «σκούρο»:
      root.style.setProperty ('- bg', 'μαύρο')
      root.style.setProperty ('- bg-text', 'λευκό')
      Διακοπή
    περίπτωση 'ηρεμία':
       root.style.setProperty ('- bg', '# B3E5FC')
       root.style.setProperty ('- bg-text', '# 37474F')
      Διακοπή
    περίπτωση «φωτός»:
      root.style.setProperty ('- bg', 'λευκό')
      root.style.setProperty ('- bg-text', 'μαύρο')
      Διακοπή
  }}
}}

Μην αφήσετε αυτό να σας τρομάξει. Είναι πολύ πιο εύκολο από ό, τι νομίζετε πιθανώς.

Καταρχάς, διατηρήστε μια αναφορά στο στοιχείο ρίζας, const root = document.documentElement

Το στοιχείο ρίζας εδώ είναι το στοιχείο HTML. Θα δείτε γιατί αυτό είναι σημαντικό σε λίγο. Αν είστε περίεργοι, χρειάζεται να ορίσετε τις νέες τιμές των μεταβλητών CSS.

Επίσης, κρατήστε μια αναφορά στα κουμπιά πάρα πολύ, const themeBtns = document.querySelectorAll ('. Theme' κουμπί ')

ο querySelectorAll παράγει μια δομή δεδομένων που μοιάζει με array που μπορούμε να βρούμε. Επανεξέταση πάνω από κάθε ένα από τα κουμπιά και να προσθέσετε έναν ακροατή του γεγονότος σε αυτά, με το πάτημα του κουμπιού.

Δείτε πώς:

themeBtns.forEach ((btn) => {
  btn.addEventListener ('κλικ', handleThemeUpdate)
})

Πού είναι η λειτουργία handleThemeUpdate; Θα το συζητήσω έπειτα.

Κάθε κουμπί που έχει πατηθεί θα έχει το handleThemeUpdate ως λειτουργία επανάκλησης. Γίνεται σημαντικό να σημειωθεί σε ποιο κουμπί έγινε κλικ και, στη συνέχεια, εκτελέστε τη σωστή λειτουργία.

Υπό το πρίσμα αυτό, χρησιμοποιείται ένας χειριστής διακόπτη και ορισμένες λειτουργίες διεξάγονται με βάση την τιμή του κουμπιού που κτυπά.

Προχωρήστε και ρίξτε μια δεύτερη ματιά στο μπλοκ κώδικα JavaScript. Θα το καταλάβετε πολύ καλύτερα τώρα.

Έργο 3: Δημιουργία του μεταβλητού περιβλήματος CSS

Σε περίπτωση που το χάσατε, δείτε τι θα χτίσουμε:

Θυμηθείτε ότι το χρώμα των πλαισίων ενημερώνεται δυναμικά και ότι το δοχείο κουτιού περιστρέφεται σε 3d χώρο καθώς αλλάζει η είσοδος περιοχής.

Μπορείτε να προχωρήσετε και να παίξετε μαζί του στο Codepen.

Αυτό είναι ένα εξαιρετικό παράδειγμα ενημέρωσης των μεταβλητών CSS με JavaScript και της αντιδραστικότητας που έρχεται μαζί του.

Ας δούμε πώς να το φτιάξουμε.

Η σήμανση

Εδώ είναι τα απαραίτητα στοιχεία.

1. Μια είσοδος εύρους
2. Ένα δοχείο για να κρατάτε τις οδηγίες
3. Μια ενότητα για τη διατήρηση μιας λίστας με άλλα κουτιά, όπου το καθένα περιέχει πεδία εισαγωγής

Η σήμανση είναι απλή.

Εδώ είναι:

  <κατά κατηγορία = "ολισθητήρας">
     Μετακινήστε αυτό το  
    
  
  

    
 <τιμή εισόδου = "κόκκινο" /> 
    
 <είσοδος /> 
    
 <είσοδος /> 
    
 <είσοδος /> 
    
 <είσοδος /> 
    
 <είσοδος /> 
  

  

Εδώ είναι μερικά πράγματα για να δείξετε την προσοχή σας.

1. Η είσοδος εύρους αντιπροσωπεύει τιμές από -50 έως 50 με τιμή βήμα 5 Επίσης, η τιμή της εισόδου εμβέλειας είναι η ελάχιστη τιμή, -50
2. Αν δεν είστε σίγουροι για το πώς λειτουργεί η είσοδος εμβέλειας, ελέγξτε το στο w3schools
3. Σημειώστε πώς η ενότητα με τα class .color-boxes περιέχει άλλα κουτιά .color-box. Σε αυτά τα δοχεία υπάρχουν πεδία εισαγωγής.
4. Αξίζει να σημειωθεί ότι η πρώτη είσοδος έχει προεπιλεγμένη τιμή κόκκινου χρώματος.

Έχοντας κατανοήσει τη δομή του εγγράφου, προχωρήστε και στυλ όπως:

1. Αφαιρέστε τα δοχεία .slider και .instructions από τη ροή εγγράφων. Τοποθετήστε τα απολύτως.
2. Δώστε στο στοιχείο του σώματος ένα χρώμα φόντου ανατολής και γαρνίρετε το φόντο με ένα λουλούδι στην κάτω αριστερή γωνία
3. Τοποθετήστε το δοχείο με κουτιά χρωμάτων στο κέντρο
4. Σχεδιάστε το δοχείο με κουτιά χρωμάτων

Ας τα χτυπήσουμε.

Τα ακόλουθα θα διορθώσουν την πρώτη εργασία.

/ * Ολισθητήρας * /
.ολισθητής,
.οδηγίες {
  θέση: απόλυτη;
  υπόβαθρο: rgba (0,0,0,0,4);
  padding: 1rem 2rem;
  ακτίνα-ακτίνα: 5px
}}
.slider {
  δεξιά: 10px;
  κορυφή: 10px;
}}
.slider> * {
  εμφάνιση: μπλοκ?
}}


/ * Οδηγίες * /
.οδηγίες {
  κείμενο-ευθυγράμμιση: κέντρο;
  κάτω: 0;
  υπόβαθρο: αρχική;
  χρωμα μαυρο;
}}

Το απόσπασμα κώδικα δεν είναι τόσο περίπλοκο όσο νομίζετε. Ελπίζω να μπορείτε να το διαβάσετε και να το καταλάβετε. Εάν όχι, ρίξτε ένα σχόλιο ή τιτίβισμα.

Η διαμόρφωση του σώματος είναι λίγο περισσότερο εμπλεκόμενη. Ας ελπίσουμε ότι καταλαβαίνετε καλά το CSS.

Δεδομένου ότι επιδιώκουμε να στυλίσουμε το στοιχείο με χρώμα φόντου και εικόνα φόντου, είναι ίσως το καλύτερο στοίχημα να χρησιμοποιήσουμε την ιδιότητα στενογραφίας φόντου για να ορίσουμε πολλαπλά υπόβαθρα.

Εδώ είναι:

σώμα {
  περιθώριο: 0;
  χρώμα: rgba (255.255.255,0.9);
  Ιστορικό: url ('http://bit.ly/2FiPrRA') 0 100% / 340px no-repeat, var (- πρωτεύον χρώμα);
  γραμματοσειρά-οικογένεια: "Σκιές στο φως δύο", διαδρομή?
}}

Το bit url είναι η σύνδεση με το λουλούδι της ανατολής.

Το επόμενο σύνολο ιδιοτήτων 0 100% αντιπροσωπεύει τη θέση φόντου της εικόνας.

Ακολουθεί μια εικόνα του τρόπου με τον οποίο λειτουργεί η τοποθέτηση φόντου CSS:

Το άλλο κομμάτι μετά την πλάγια κάθετο αναπαριστά το μέγεθος φόντου. Αυτό έχει ρυθμιστεί σε 340px Εάν το κάνατε μικρότερο, η εικόνα θα ήταν μικρότερη.

όχι-επανάληψη, μπορείτε να υπολογίσετε τι κάνει. Αποτρέπει την επανάληψη του φόντου.

Τέλος, οτιδήποτε έρχεται μετά το κόμμα είναι μια δεύτερη δήλωση υποβάθρου. Αυτή τη φορά έχουμε ρυθμίσει μόνο το χρώμα φόντου σε var (πρωτεύον χρώμα)

Ωχ, αυτή είναι μια μεταβλητή.

Η συνέπεια αυτού είναι ότι πρέπει να ορίσετε τη μεταβλητή. Δείτε πώς:

: root {
  - αρχικό χρώμα: rgba (241,196,15,1)
}}

Το κύριο χρώμα είναι το κίτρινο χρώμα του ήλιου. Δεν έγινε και κάτι. Θα βάλουμε σύντομα κάποιες άλλες μεταβλητές.

Τώρα, ας κεντράσουμε τα κουτιά των χρωμάτων

main.booth {
  min-ύψος: 100vh;
  
  οθόνη: flex;
  justify-content: center;
  ευθυγράμμιση-στοιχεία: κέντρο
}}

Το κύριο δοχείο λειτουργεί ως εύκαμπτο δοχείο και τοποθετεί σωστά το άμεσο παιδί στο κέντρο της σελίδας. Αυτό συμβαίνει να είναι το αγαπημένο μας κουτί έγχρωμων κουτιών

Ας κάνουμε το δοχείο με κουτιά με χρώμα και τα στοιχεία των παιδιών όμορφο.

Πρώτον, τα παιδικά στοιχεία:

.color-box {
  padding: 1rem 3.5rem;
  περιθώριο-κάτω: 0.5rem;
  σύνορα: 1px στερεά rgba (255.255.255,0.2);
  ακραία ακτίνα: 0.3rem;
  σκιά κουτιού: 10px 10px 30px rgba (0,0,0,0,4);
}}

Αυτό θα το κάνει. Υπάρχει επίσης μια όμορφη σκιά. Αυτό θα μας κάνει μερικά δροσερά εφέ.

Δεν είναι όλα αυτά. Ας στυλίσουμε το συνολικό δοχείο κιβωτίων δοχείων:

/ * Κουτιά χρώματος * /
.color-boxes {
  φόντο: var (- δευτερεύων χρώμα);
  σκιά κουτιού: 10px 10px 30px rgba (0,0,0,0,4);
  ακραία ακτίνα: 0.3rem;
  
  μετασχηματισμός: προοπτική (500px) rotateY (calc (var (- slider) * 1deg));
  μετάβαση: μετασχηματισμός 0,3s
}}

Ω θεε μου!

Υπάρχουν πολλά μέσα εκεί.

Επιτρέψτε μου να το σπάσω.

Εδώ είναι το απλό κομμάτι:

.color-boxes {
   φόντο: var (- δευτερεύων χρώμα);
   σκιά κουτιού: 10px 10px 30px rgba (0,0,0,0,4);
   ακραία ακτίνα: 0.3rem;
}}

Ξέρεις τι κάνει, έτσι;

Υπάρχει μια νέα μεταβλητή εκεί μέσα. Αυτό πρέπει να ληφθεί προσθέτοντάς το στον επιλογέα ρίζας.

: root {
  - αρχικό χρώμα: rgba (241,196,15,1);
  - δευτερεύον χρώμα: κόκκινο.
}}

Το δευτερεύον χρώμα είναι κόκκινο. Αυτό θα δώσει στο δοχείο ένα κόκκινο φόντο.

Τώρα στο τμήμα που πιθανόν να σας προκαλούσε σύγχυση:

/ * Κουτιά χρώματος * /
.color-boxes {
  μετασχηματισμός: προοπτική (500px) rotateY (calc (var (- slider) * 1deg));
  μετάβαση: μετασχηματισμός 0,3s
}}

Για μια στιγμή, θα μπορούσαμε να απλοποιήσουμε την αξία της ιδιότητας μετασχηματισμού παραπάνω.

Για παράδειγμα:

μετασχηματισμός: προοπτική (500px) rotateY (30deg);

Το σύντομο μετασχηματισμό εφαρμόζει δύο διαφορετικές λειτουργίες. Η μία, η προοπτική και η άλλη η περιστροφή κατά μήκος του άξονα Υ.

Χμμμ, λοιπόν ποια είναι η αντιμετώπιση των λειτουργιών προοπτικής και περιστροφής;

Η λειτουργία προοπτικής () εφαρμόζεται σε ένα στοιχείο που μεταμορφώνεται σε τρισδιάστατο χώρο. Ενεργοποιεί τον τρισδιάστατο χώρο και δίνει το βάθος του στοιχείου κατά μήκος του άξονα z.

Μπορείτε να διαβάσετε περισσότερα σχετικά με τη λειτουργία προοπτικής για τους κωδικούς.

Η λειτουργία rotateY, ποια είναι η αντιμετώπιση αυτής;

Με την ενεργοποίηση του 3d χώρου, το στοιχείο έχει τα επίπεδα x, y, z. Η λειτουργία rotateY περιστρέφει το στοιχείο κατά μήκος του επιπέδου Y.

Το ακόλουθο διάγραμμα από τα codrops είναι πραγματικά χρήσιμο για την απεικόνιση αυτού.

Ελπίζω ότι έσβησε μερικά από το ατμό.

Πίσω από όπου ξεκινήσαμε.

Όταν μετακινείτε το ρυθμιστικό, γνωρίζετε ποια λειτουργία επηρεάζει την περιστροφή του κουτιού .container;

Είναι η επικεφαλής συνάρτηση rotateY. Το κουτί περιστρέφεται κατά μήκος του άξονα Υ.

Δεδομένου ότι η τιμή που μεταφέρεται στη λειτουργία rotateY θα ενημερωθεί μέσω JavaScript, η τιμή αντιπροσωπεύεται με μια μεταβλητή.

Λοιπόν, γιατί πολλαπλασιάζεται με τη μεταβλητή από 1deg;

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

Μπορείτε να τα μετατρέψετε σε οποιαδήποτε μονάδα θέλετε, κάνοντας πολλαπλασιασμό μέσω της λειτουργίας calc.

Αυτό σας επιτρέπει να κάνετε ό, τι θέλετε με αυτές τις τιμές όταν τις έχετε. Θέλετε να μετατρέψετε σε deg ή ως αναλογία του viewport vw του χρήστη, μπορείτε ό, τι θέλετε.

Σε αυτή την περίπτωση, μετατρέπουμε τον αριθμό σε ένα βαθμό πολλαπλασιάζοντας την τιμή "αριθμός" κατά 1deg

Δεδομένου ότι το CSS δεν κατανοεί τα μαθηματικά, πρέπει να περάσετε αυτήν την αριθμητική στη λειτουργία calc για να αξιολογηθεί σωστά από το CSS.

Μόλις γίνει αυτό, είναι καλό να πάμε. Η τιμή αυτής της μεταβλητής μπορεί να ενημερωθεί στο JavaScript όσο θέλουμε.

Τώρα, παραμένει μόνο ένα κομμάτι CSS.

Εδώ είναι:

/ * Χειρισμός χρωμάτων για κάθε πλαίσιο χρώματος * /
.color-box: nth-παιδί (1) {
  υπόβαθρο: var (- bg-1)
}}
.color-box: nth-child (2) {
  υπόβαθρο: var (- bg-2)
}}
.color-box: nth-child (3) {
  υπόβαθρο: var (- bg-3)
}}
.color-box: nth-child (4) {
  υπόβαθρο: var (- bg-4)
}}
.color-box: nth-child (5) {
  υπόβαθρο: var (- bg-5)
}}
.color-box: nth-παιδί (6) {
  υπόβαθρο: var (- bg-6)
}}

Τι είναι αυτό το βουντού;

Πρώτα απ 'όλα, ο επιλογέας n-παιδιού επιλέγει το καθένα από τα παιδικά κιβώτια.

Υπάρχει μια μικρή προοπτική που χρειάζεται εδώ. Γνωρίζουμε ότι θα ενημερώνουμε το χρώμα φόντου κάθε κουτιού. Γνωρίζουμε επίσης ότι αυτό το χρώμα φόντου πρέπει να αντιπροσωπεύεται από μια μεταβλητή ώστε να είναι προσβάσιμη μέσω JavaScript. Σωστά?

Θα μπορούσαμε να προχωρήσουμε και να το κάνουμε αυτό:

.color-box: nth-παιδί (1) {
  υπόβαθρο: var (- bg-1)
}}

Εύκολος.

Υπάρχει όμως ένα πρόβλημα. Εάν αυτή η μεταβλητή δεν υπάρχει, τι συμβαίνει;

Χρειαζόμαστε μια εναλλακτική λύση.

Αυτό λειτουργεί:

.color-box: nth-παιδί (1) {
  φόντο: var (- bg-1, κόκκινο)
}}

Σε αυτή τη συγκεκριμένη περίπτωση, επέλεξα ΔΕΝ να παρέχω οποιεσδήποτε εναλλακτικές λύσεις.

Εάν μια μεταβλητή που χρησιμοποιείται σε μια τιμή ιδιότητας δεν είναι έγκυρη, το ακίνητο θα πάρει την αρχική του αξία.

Συνεπώς, όταν το -bg-1 είναι άκυρο ή δεν είναι διαθέσιμο, το φόντο θα προεπιλεγεί στην αρχική του τιμή διαφανής.

Οι αρχικές τιμές αναφέρονται στις τιμές μιας ιδιότητας όταν δεν έχουν καθοριστεί ρητά. Για παράδειγμα, εάν δεν ρυθμίσετε το χρώμα φόντου ενός στοιχείου, θα είναι προεπιλεγμένο σε διαφανή

Οι αρχικές τιμές είναι το είδος των προεπιλεγμένων τιμών ιδιοτήτων.

Ας γράψουμε κάποιο JavaScript

Είναι πολύ λίγα που πρέπει να κάνουμε στην πλευρά JavaScript των πραγμάτων.

Πρώτα ας χειριστούμε το ρυθμιστικό.

Χρειαζόμαστε μόνο 5 γραμμές για αυτό!

const ρίζα = document.documentElement
const range = document.querySelector ('. ολισθητήρας καναλιού')

// καθώς η τιμή του εύρους ρυθμιστή αλλάζει, κάντε κάτι
range.addEventListener ('είσοδος', handleSlider)

(ε) {
  αφήστε value = e.target.value
  root.style.setProperty ('- ρυθμιστής', τιμή)
}}

Αυτό ήταν εύκολο, ε;

Επιτρέψτε μου να σας εξηγήσω μόνο σε περίπτωση που σας χάσει.

Καταρχάς, κρατήστε μια αναφορά στο στοιχείο του ρυθμιστικού, const range = document.querySelector ('. Slider-slider')

Ρυθμίστε έναν ακροατή συμβάντος για το πότε αλλάζει η τιμή της εισόδου εμβέλειας, range.addEventListener ('input', handleSlider)

Γράψτε την κλήση, handleSlider

(ε) {
  αφήστε value = e.target.value
  root.style.setProperty ('- ρυθμιστής', τιμή)
}}

Το root.style.setProperty ('- slider', value) λέει, να πάρει το στοιχείο ρίζας (HTML), να αρπάξει το στυλ του και να ορίσει μια ιδιότητα σε αυτό.

Χειρισμός των αλλαγών χρώματος

Αυτό είναι εξίσου εύκολο με το χειρισμό της αλλαγής τιμής ρυθμιστή.

Δείτε πώς:

Εισαγωγές const = document.querySelectorAll ('. color-box} είσοδος')

// καθώς αλλάζει η τιμή στην είσοδο, κάντε κάτι.
inputs.forEach (είσοδος => {
  input.addEventListener ('είσοδος', handleInputChange)
})

λειτουργία handleInputChange (e) {
  αφήστε value = e.target.value
  αφήστε inputId = e.target.parentNode.id
  αφήστε inputBg = `- bg - $ {inputId} '
  root.style.setProperty (inputBg, τιμή)
}}

Διατηρήστε αναφορά σε όλες τις εισόδους κειμένου, input const = document.querySelectorAll ('.colour-box' input '))

Ρυθμίστε έναν ακροατή συμβάντων σε όλες τις εισόδους:

inputs.forEach (είσοδος => {
   input.addEventListener ('είσοδος', handleInputChange)
})

Γράψτε τη λειτουργία handleInputChange:

λειτουργία handleInputChange (e) {
  αφήστε value = e.target.value
  αφήστε inputId = e.target.parentNode.id
  αφήστε inputBg = `- bg - $ {inputId} '
  root.style.setProperty (inputBg, τιμή)
}}

Φτου…

Αυτό είναι!

Το έργο έχει ολοκληρωθεί.

Πώς μου λείπει αυτό;

Είχα ολοκληρώσει και επεξεργαστεί το αρχικό σχέδιο αυτού του άρθρου όταν παρατήρησα ότι δεν ανέφερα οπουδήποτε την υποστήριξη του προγράμματος περιήγησης. Έτσι, επιτρέψτε μου να διορθώσω το χάος μου.

Η υποστήριξη προγράμματος περιήγησης για μεταβλητές CSS (γνωστές και ως προσαρμοσμένες ιδιότητες) δεν είναι καθόλου κακή. Είναι αρκετά καλό, με αξιοπρεπή υποστήριξη σε όλα τα σύγχρονα προγράμματα περιήγησης (πάνω από το 87% κατά τη διάρκεια αυτής της γραφής).

Έτσι, μπορείτε να χρησιμοποιήσετε τις μεταβλητές CSS στην παραγωγή σήμερα; Θα πω ναι! Φροντίστε να ελέγξετε τι είναι το ποσοστό υιοθεσίας για τον εαυτό σας.

Στη φωτεινή πλευρά, μπορείτε να χρησιμοποιήσετε έναν προεπεξεργαστή όπως ο Μύθος. Θα προλειτουργήσει το "μελλοντικό" CSS σας σε κάτι που χρησιμοποιείτε σήμερα. Πόσο δροσερό, ε;

Εάν έχετε κάποια εμπειρία χρησιμοποιώντας το postCSS, αυτό είναι εξίσου ένας πολύ καλός τρόπος για να χρησιμοποιήσετε το μελλοντικό CSS σήμερα. Ακολουθεί μια ενότητα postCSS για μεταβλητές CSS.

Αυτό είναι. Έχω τελειώσει εδώ.

Ωχ, αλλά έχω ερωτήσεις!

Πάρτε το Ebook για ανάγνωση εκτός σύνδεσης, και επίσης να πάρετε μια ιδιωτική χαλαρή πρόσκληση όπου μπορείτε να με ρωτήσετε τίποτα.

Αυτή είναι μια δίκαιη συμφωνία, έτσι;

Τα λέμε αργότερα!