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;
}

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

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

Αν θέλουμε να χρησιμοποιήσουμε διαφορετικό μπλε για το στοιχείο button, μπορούμε να επαναφέρουμε τη μεταβλητή --blue μέσα στον επιλογέα button. Όταν χρησιμοποιούμε var(--blue) σε αυτόν τον επιλογέα, θα χρησιμοποιείται η τοπική τιμή της μεταβλητής --blue.

Δούμε ότι η τοπική μεταβλητή --blue καλύπτει την παγκόσμια μεταβλητή --blue στο στοιχείο button:

παράδειγμα

: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;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

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

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

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

παράδειγμα

: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;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

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

Υποστήριξη Browser

Οι αριθμοί στη τάβλη θα σημειώσουν την πρώτη έκδοση του browser που υποστηρίζει πλήρως αυτό το χαρακτηριστικό.

Συνάρτηση
var() 49.0 15.0 31.0 9.1 36.0

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

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