Overriding Variables
From the previous page we have learned that global variables can be accessed through the entire document, while
Override Global Variable With Local Variable
From the previous page 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
Example Code
css: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;
}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
Example Code
css: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;
}CSS var() Function
| Function | Description |
|---|---|
| var() | Inserts the value of a CSS variable |