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:

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

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:

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

Add a New Local Variable

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

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