Override Global Variable With Local Variable
from the earlier example we have learned that global variables can be accessed through the entire document, while local variables can be used only inside the selector where it is declared.
Sometimes we want the variables to change only in a specific section of the page.
Assume we want a different border color for <p class="note"> elements. Then, we can re-declare the --primary-bg-color variable inside the .note selector. When we use var(--primary-bg-color) inside this selector, it will use the local --primary-bg-color variable value declared here.
We see that the local --primary-bg-color variable will override the global --primary-bg-color variable for the .note selector:
Example
: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;
}Live preview
Add a New Local Variable
If a variable is going to be used only one single place, we could also have declared a new local variable, like this:
Example
: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;
}Live preview
CSS var() Function
| Function | Description |
|---|---|
| var() | Inserts the value of a CSS variable |