CSS Variables

A CSS preprocessor is the possibility of using variables to create re-usable values. SASS are very useful for front-end web development, they aren’t required for using variables, as this can be done in native CSS.

:root {
  --main-bg-color: coral;
  --main-txt-color: #fff; 
  --main-padding: 15px; 
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}