CSS Μεταβλητές

CSS Μεταβλητές

Η συνάρτηση var() χρησιμοποιείται για την εισαγωγή τιμών μεταβλητών CSS.

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

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

Παραδοσιακός τρόπος

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

παράδειγμα

body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}
button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

Δοκιμάστε το προσωπικά

Η σύνταξη της συνάρτησης var()

Η συνάρτηση var() χρησιμοποιείται για την εισαγωγή τιμών μεταβλητών CSS.

Η σύνταξη της συνάρτησης var() είναι η εξής:

var(name, value)
Τιμή Περιγραφή
name Απαιτείται. Όνομα μεταβλητής (ξεκινά με δύο διπλάβια -).
value Προαιρετικό. Αντικαταστάτης τιμή (χρησιμοποιείται όταν δεν βρεθεί η μεταβλητή).

Σημείωση:Το όνομα μεταβλητής πρέπει να ξεκινά με δύο διπλάβια (-) και να είναι κεφαλαία!

Πώς λειτουργεί η var()

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

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

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

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

Το παρακάτω παράδειγμα είναι το ίδιο με το προηγούμενο παράδειγμα, αλλά εδώ χρησιμοποιούμε τη συνάρτηση var().

Πρώτα, δηλώνουμε δύο καθολικές μεταβλητές (--blue και --white). Στη συνέχεια, χρησιμοποιούμε τη συνάρτηση var() για να εισάγουμε τις τιμές των μεταβλητών αργότερα στη λίστα στυλ:

παράδειγμα

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Δοκιμάστε το προσωπικά

Η χρήση της var() έχει τα εξής πλεονεκτήματα:

  • Κάνει τον κώδικα πιο εύκολο να διαβάζεται (περισσότερο κατανοητό)
  • Κατασχεύει την αλλαγή των χρωμάτων

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

παράδειγμα

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Δοκιμάστε το προσωπικά

Υποστήριξη Browser

Οι αριθμοί στην τаблицή υποδεικνύουν την πρώτη έκδοση του browser που υποστηρίζει πλήρως την ιδιότητα.

Λειτουργία
var() 49.0 15.0 31.0 9.1 36.0

CSS var() Λειτουργία

Λειτουργία Περιγραφή
var() Εισάγετε την τιμή της μεταβλητής CSS.