CSS Variables

CSS3 introduced the idea of including variables in your CSS to make it easier to change the values of repeated properties.
The concept of style variables was actually something that came from CSS Preprocessors like SASS, Stylus, and LESS. We will cover SASS later this semester.
The basic syntax

/* create the variables within a specific scope
:root is used as it includes the whole page */

:root {
  --myvar1: 1rem;
  --myvar2: pink;
}

/* the method var( ) is used to inject the value into a style declaration */
p {
  font-size: var(--myvar1);
  color: var(--myvar2);
  border: 1px solid hsl(var(--myvar2), 50%, 50%);
}

CSS variables video

CSS variables are a great way to avoid errors when using the same value for a colour or a font-size.