CSS supports variables

These are pretty handy when it comes to making it possible to define consistent colors across a product or website.

A variable has -- in front of it and then the variable can be used elsewhere. It makes sense combine this with use of named prefixes. To allows these variables to be used everywhere one needs to define them in the :root pseudo selector, i.e.:

:root{
   --HEADblue : #00A000;
};

/* Now we can use this everywhere */

.NAVicon{
   background-color: var(--HEADblue);
};

See:

Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN

Concepts

CSS supports variables

Analytics

Related content