Custom properties

Variables in native CSS

Actually variables in native CSS (CSS Custom properties) are not so new anymore. CSS variables also work in the majority of relevant browsers (see caniuse.com). In fact, the associated W3C document was already published at the end of 2015. Nevertheless, it seems to have escaped some people’s notice that native CSS can now be used in just as variable a way as various preprocessors such as SASS, SCSS, etc. Therefore here again a short outline to the topic.

Why variables in CSS

Variables in CSS can be very helpful when it comes to globally changing certain attributes of a page. If, for example, the color of a company CD (Corporate Design) changes, it is absolutely helpful if these can be executed globally by changing a single variable. This not only saves the work of manual adaptation (comparatively time-consuming and error-prone), but also ensures better traceability and clarity in the code. You can see this in the following CodePen example.

The variables are defined here in :root and can be used in further CSS code. A…