CSS Variables Tutorial 1 What are CSS Variables

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. ... Complex websites have very large amounts of CSS, often with a lot of repeated values.To declare a CSS variable you will have to add a double dash before the name of that var. Now, in order to use the value of the CSS variable, we can use the var(…) function. The easiest way to manage your CSS vars is by declaring them into the :root pseudo-class.CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries. A good way to use CSS variables is when it comes to the colors of your design.Variables are one of the major reasons CSS preprocessors exist at all. The ability to set a variable for something like a color, use that variable throughout the CSS you write, and know that it will be consistent, DRY, and easy to change is useful.