CSS Overriding Variables

[Guest]

CSS Overriding Variables


Override Global Variable With Local Variable
From the previous page we have learned that global variables can be accessed/used through the entire document, while
local variables can be used only inside the selector where it is declared.
Look at the example from the previous page:

Example

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

Try it Yourself »


Sometimes we want the variables to change only in a specific section of the page.
Assume we want a different color of blue for button elements. Then, we can
re-declare the --blue variable inside the button selector. When we use var(--blue)
inside this selector, it will use the local --blue variable value declared here.
We see that the local --blue variable will override the global --blue
variable for the button elements:

Example

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

Try it Yourself »









Add a New Local Variable
If a variable is to be used at only one single place, we could also have declared a new local variable, like this:

Example

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

Try it Yourself »



Browser Support
The numbers in the table specify the first browser version that fully supports the
var() function.



Function







var()
49.0
15.0
31.0
9.1
36.0




CSS var() Function


Property
Description


var()
Inserts the value of a CSS variable














★
+1

Reference: https://www.w3schools.com/css/css3_vari ... riding.asp