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