Overriding Variables

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

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

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

CSS var() Function