Suprascrierea variabilei globale cu variabila locală
Variabilele globale pot fi folosite oriunde în document, în timp ce variabilele locale pot fi folosite doar în interiorul selectorului în care sunt declarate.
Uneori doriți ca o variabilă să se schimbe doar într-o anumită parte a paginii.
Pentru a face acest lucru, puteți redeclara variabila într-un selector mai specific. Când folosiți var() în interiorul acelui selector, va fi utilizată valoarea locală în loc de cea globală. Variabila locală suprascrie variabila globală pentru acel selector.
Exemplu
Aici, selectorul .note redeclară --primary-bg-color ca roșu. În interiorul .note, este folosită valoarea locală în loc de albastrul global.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Override Global Variable With Local Variable</title>
<style>
:root {
--primary-bg-color: #1e90ff;
--primary-color: #ffffff;
}
body {
background-color: var(--primary-bg-color);
}
.container {
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
}
.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}
.container .note {
--primary-bg-color: red; /* local variable will override global */
border: 1px solid var(--primary-bg-color);
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Welcome</h2>
<p>This is a container with global variable colors.</p>
<div class="note">
<p>This note has a red border because the local --primary-bg-color overrides the global value.</p>
</div>
</div>
</body>
</html>
Adăugarea unei noi variabile locale
Dacă o variabilă va fi folosită doar într-un singur loc, puteți declara o variabilă locală complet nouă în loc să o suprascrieți pe cea globală.
Exemplu
Aici, o nouă variabilă locală --note-border-color este declarată în interiorul .note și folosită doar pentru chenarul acelui element.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add a New Local Variable</title>
<style>
:root {
--primary-bg-color: #1e90ff;
--primary-color: #ffffff;
}
body {
background-color: var(--primary-bg-color);
}
.container {
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
}
.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}
.container .note {
--note-border-color: red; /* new local variable */
border: 1px solid var(--note-border-color);
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Welcome</h2>
<p>This is a container with global variable colors.</p>
<div class="note">
<p>This note has a red border using a new local variable --note-border-color.</p>
</div>
</div>
</body>
</html>