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

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

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

Πώς να ορίσετε και να χρησιμοποιήσετε μεταβλητές CSS

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

Πάρτε το ακόλουθο παράδειγμα ενός αρχείου HTML και ενός αρχείου CSS που δεν χρησιμοποιεί μεταβλητές CSS.

HTML:

html>
<htmllang="en">





instagram viewer



<κεφάλι>
<τίτλος>Μεταβλητές CSS - Παραλλαγές κουμπιώντίτλος>
<Σύνδεσμοςσχετ="φύλλο στυλ"href="Variables.css" />
κεφάλι>
<σώμα>
<div>
<h1>Μεταβλητές CSSh1>
<div>

CSS:

.btn {
υλικό παραγεμίσματος: 1rem 1.5 εκμ;
 φόντο: διαφανές;
 βάρος γραμματοσειράς: 700;
 χρώμα: κόκκινο;
}

Έτσι πρέπει να μοιάζει η σελίδα σας:

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

Όπως οι περισσότερες γλώσσες προγραμματισμού, πρέπει να αρχικοποιήσετε και να αντικαταστήσετε μεταβλητές CSS.

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

:ρίζα{
/*Μεταβλητή CSS*/
--variable_name: value;
}

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

Για να αντικαταστήσετε τη μεταβλητή στο στυλ CSS σας, θα χρησιμοποιήσετε το var() ιδιοκτησία:

:ρίζα {
/*Μεταβλητή CSS*/
 --πρωταρχικός: #900c3f;
 --δευτερεύων: #ff5733;
}
.btn {
υλικό παραγεμίσματος: 1rem 1.5 εκμ;
 φόντο: διαφανές;
 βάρος γραμματοσειράς: 700;
 χρώμα: var(--πρωταρχικός);
 χρώμα του φόντου: var(--δευτερεύων);
}
.υποδημοτικό {
 χρώμα: var(--δευτερεύων);
 χρώμα του φόντου: var(--πρωταρχικός);
}

Ο ριζικός επιλογέας περιέχει δύο μεταβλητές: --πρωταρχικός και --δευτερεύων. Στη συνέχεια και οι δύο μεταβλητές αντικαθίστανται στο .btn κατηγορία ως χρώμα και χρώμα φόντου αντίστοιχα.

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

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

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

:ρίζα {
 --πρωταρχικός: #900c3f;
 --δευτερεύων: #ff5733;
}
.btn {
υλικό παραγεμίσματος: 1rem 1.5 εκμ;
 φόντο: διαφανές;
 βάρος γραμματοσειράς: 700;
 χρώμα: var(--κύριο, μπλε);
}

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

Χειρισμός και παράκαμψη μεταβλητών CSS με JavaScript

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

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

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

HTML:

html>
<htmllang="en">
<κεφάλι>
<τίτλος>Μεταβλητές CSS - Παραλλαγές κουμπιώντίτλος>
<Σύνδεσμοςσχετ="φύλλο στυλ"href="Variables.css" />
<γραφή>
λειτουργίαάλλαξε χρώμα() {
// Λάβετε το στοιχείο στο οποίο θέλετε να αλλάξετε τη μεταβλητή
συνθ myElement = έγγραφο.querySelector(":ρίζα");
// Λάβετε την τρέχουσα τιμή της μεταβλητής
αφήνω currentValue = getComputedStyle (myElement).getPropertyValue(
"--δευτερεύων"
 );
 // Σειρά ο νέοςαξίαΓια ο μεταβλητός
myElement.στυλ.setΙδιότητα("--δευτερεύων", "#DAF7A6");
 }
γραφή>
κεφάλι>
<σώμα>
<div>
<h1>Μεταβλητές CSSh1>
<div>

CSS:

:ρίζα {
 --πρωταρχικός: #900c3f;
 --δευτερεύων: #ff5733;
}
.btn {
υλικό παραγεμίσματος: 1rem 1.5 εκμ;
 φόντο: διαφανές;
 βάρος γραμματοσειράς: 700;
}
.υποδημοτικό {
 χρώμα: var(--πρωταρχικός);
 χρώμα του φόντου: var(--δευτερεύων);
}

Σε αυτόν τον κώδικα JavaScript, το άλλαξε χρώμα() Η λειτουργία ενημερώνει το χρώμα του πρώτου κουμπιού όταν ο χρήστης κάνει κλικ σε αυτό.

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

Πριν κάνετε κλικ στο κουμπί:

Αφού κάνετε κλικ στο κουμπί:

Μπορείτε επίσης να χρησιμοποιήσετε JavaScript για να δημιουργήσετε νέες μεταβλητές CSS ή να τις αφαιρέσετε εντελώς.

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

// Δημιουργώ ένα νέοςμεταβλητός
έγγραφο.documentElement.style.setProperty('--νέο-χρώμα', 'μπλε');
// Αφαίρεση μεταβλητής
έγγραφο.documentElement.style.removeProperty('--νέο-χρώμα');

Χρήση μεταβλητών CSS με προεπεξεργαστές

Η χρήση μεταβλητών εντός της τεχνολογίας frontend επιτεύχθηκε αρχικά με προεπεξεργαστές CSS όπως SASS, LESS και Stylus.

Ο σκοπός των προεπεξεργαστών CSS είναι να αναπτύξουν κώδικα που επεκτείνει τις θεμελιώδεις δυνατότητες του τυπικού CSS. Στη συνέχεια, κάντε αυτόν τον κώδικα μεταγλώττιση σε τυπικό CSS για να κατανοήσει το πρόγραμμα περιήγησης, όπως περίπου πώς λειτουργεί το TypeScript με JavaScript.

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

Μπορείτε να ορίσετε μια μεταβλητή SASS $κύριο χρώμα και χρησιμοποιήστε το για να ορίσετε την τιμή μιας μεταβλητής CSS. Στη συνέχεια, χρησιμοποιήστε τη μεταβλητή CSS σε μια κλάση κανονικού στυλ.

Μπορείτε επίσης να χρησιμοποιήσετε συναρτήσεις SASS για να χειριστείτε τις τιμές των μεταβλητών CSS.

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

:ρίζα {
 --κύριο: $main-color;
 --δευτερεύον: ελαφρύνω(var(--πρωταρχικός), 20%);
}
.btn {
 χρώμα: var(--πρωταρχικός);
 χρώμα του φόντου: var(--δευτερεύων);
}

Εδώ, η συνάρτηση SASS αστράφτω() χειρίζεται την αξία του --πρωταρχικός για να αποκτήσετε μια τιμή για --δευτερεύων.

Σημειώστε ότι οι μεταβλητές SASS δεν είναι προσβάσιμες μέσω JavaScript. Επομένως, εάν χρειάζεται να χειριστείτε τις τιμές των μεταβλητών σας κατά το χρόνο εκτέλεσης, θα πρέπει να χρησιμοποιήσετε μεταβλητές CSS.

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

Συμβουλές για τη χρήση μεταβλητών CSS στην ανάπτυξη Ιστού

Ακολουθούν μερικές σημαντικές συμβουλές που πρέπει να σημειώσετε που θα σας βοηθήσουν να χρησιμοποιήσετε καλύτερα τις μεταβλητές CSS.

Ξεκινήστε με μια σαφή σύμβαση ονομασίας

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

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

Επωφεληθείτε από την Cascading Nature του CSS

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

Χρησιμοποιήστε τις μεταβλητές CSS με προσοχή

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

Δοκιμάστε τις μεταβλητές σας

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

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