CSS Variables

Create dynamic CSS rules to make sitewide changes easily.

For example, you can use variables in your css styles for color, and set them all in one place.

:root {
  --link-color: red;
  --text-color: green;
  --background-color: blue;
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
}

a {
  color: var(--link-color);
}

We can set the variables in javascript.

document.querySelector('body').style.setProperty('--background-color', 'blue')

Use default variables.

body {
  background-color: var(--background-color, black);
}