Μεταβλητές CSS - Η συνάρτηση var().

Πίνακας περιεχομένων

Μεταβλητές 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;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h1>The Traditional Way</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

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

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

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

 var(--name, value)

name: Απαιτείται. Το όνομα της μεταβλητής (πρέπει να ξεκινά με δύο παύλες)
value: Προαιρετικός. Η εναλλακτική τιμή (χρησιμοποιείται αν δεν βρεθεί η μεταβλητή)

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

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

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

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

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

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

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

Αρχικά, δηλώνουμε δύο καθολικές μεταβλητές (--μπλε και --λευκό). Στη συνέχεια, χρησιμοποιούμε το Συνάρτηση 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;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

Τα πλεονεκτήματα της χρήσης 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;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

Υποστήριξη προγράμματος περιήγησης

Οι αριθμοί στον πίνακα καθορίζουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως το Συνάρτηση var().

Function
var()	49.0	15.0	31.0	9.1	36.0

Συνάρτηση CSS `var()`

var(): Εισάγει την τιμή μιας μεταβλητής CSS

Μεταβλητές CSS - Η συνάρτηση var().

Πίνακας περιεχομένων