The result is a CSS preprocessor on steroids, and one that runs natively in the browser to boot. With IE Edge expecting to support this feature soon as well, these are exciting times indeed to be a frontend developer. Lets see what CSS variables are all a

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;)

How var() Works. First of all: CSS variables can have a global or local scope. Global variables can be accessed/used through the entire document, while local variables can be used only inside the selector where it is declared.