Παράκαμψη μεταβλητών CSS

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

Αντικατάσταση καθολικής μεταβλητής με τοπική μεταβλητή

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

Δείτε το παράδειγμα από την προηγούμενη σελίδα:

Παράδειγμα

 :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(--μπλε) μέσα σε αυτόν τον επιλογέα, θα χρησιμοποιήσει την τοπική τιμή μεταβλητής --blue που δηλώνεται εδώ.

Βλέπουμε ότι η τοπική μεταβλητή --blue θα αντικαταστήσει την καθολική --blue μεταβλητή για τα στοιχεία του κουμπιού:

Παράδειγμα

 :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 {
  --blue: #0000ff; /* local variable will 
  override global */
  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 {
  --blue: #0000ff; /* local variable will override global */
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>
</head>
<body>

<h1>Override Global Variable With Local Variable</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>

Προσθήκη νέας τοπικής μεταβλητής

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

Παράδειγμα

 :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 {
  --button-blue: #0000ff; /* new local 
  variable */
  background-color: var(--white);
  
  color: var(--button-blue);
  border: 1px solid var(--button-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 {
  --button-blue: #0000ff; /* new local variable */
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}
</style>
</head>
<body>

<h1>New Local Variable</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