An Experiment with CSS Variables

A Codepen Experiment on Variables and Manipulating Them

Anson Li
Anson Li
Jul 30, 2017 · 5 min read

The Experiment

A little background before this. I’ve recently been introduced to the concept of using variables in CSS without the use of SCSS, SASS, preprocessors, etc., which was something I’ve missed since I’ve started learning web development. While preprocessors and the like have many other functions that still provide a lot of value as a tool to be used alongside of straight HTML/CSS, my opinion of them is that it “clutters” the workflow. I find that the fewer the amount of tools you need for a job, you have less and less of a chance of complications or confusion.

Coming from a programming background (Python and C) I believe that being able to use variables in any programming language is an extremely powerful and important tool and I’m glad that browser support for CSS Variables have finally caught up to the point where it’s generally acceptable for use.

Source: https://caniuse.com/#search=variables

Yes, the axiom of “somebody somewhere out there is already working on your idea” exists, but for learning and demonstration purposes I find that it has much more meaning to perform the experiment myself so I can learn it first-hand. Since I also come from an engineering background, let’s stick to a typical lab report style of approach.

Abstract

This experiment examined some of the use cases of CSS Variables and its potential in providing developers with a more robust and adaptive code that can also be modified easily in the future.

Introduction

The purpose of this experiment was to test the capabilities of using CSS Variables on a surface-level and how similar they can be used like in other programming languages (like Python or C).

A brief look into how CSS Variables work would conclude that they simply store a string and when called upon will replace the variable’s location with said string. The syntax for defining and calling variables can be seen below:

Syntax for using CSS variables

Mandatory code includes :root{} and var(), where variableName is where you enter your desired variable name, “value” is the value you want (e.g. 200px, #1E1E1E, a string inside the quotes, etc.). You set the variable in the :root selector (the double dashes are necessary as a prefix to every variable name) and place the variable within the parentheses of var() to call upon it (again, don’t forget the double dashes).

Method

Codepen was the tool used to demonstrate and perform the experiments on, mainly because it is very easy to share and also does not require the typical setup you would need to build a web page from scratch.

In addition to CSS Variables, a key function of CSS called calc was used in conjunction to test the limits of what can be done with variables.

Procedure

This experiment tested the limits of what can be stored in a variable and how/if they could be manipulated with calc.

Results

https://codepen.io/CodingLi/pen/oebMxB

Basic storage of any value that you would normally set an attribute at, as it should be written in proper syntax, will work. Setting up the HTML with a simple div with a class of box and the CSS above yielded this result:

https://codepen.io/CodingLi/full/eEJvqK

To demonstrate the manipulation of variables, the following CSS code was used:

The resulting output was as follows:

https://codepen.io/CodingLi/full/oebMxB

Discussion

As long as the syntax was correct, then the location where the variable is called upon will be replaced EXACTLY as it was stored in the :root selector. Any mistake in the syntax will yield an invalid result and be treated as null, as can be seen in the font-family attribute where the font did not actually change to “Comic Sans” (thankfully).

Further testing of how the variables can be manipulated showed that:

  1. Calling an existing variable when declaring a new variable (cascading rule applies).
  2. Variables can be manipulated within the :root selector as well as when declaring the attribute in a separate selector.
  3. Stored hex codes cannot be manipulated by using calc. If colour were to be manipulated, then a number value would have to be stored and rbg() or rgba() would have to be used (see box2 and box3)
  4. Variables cannot store selector names, nor can they store an entire selector with attributes (see the last two variables in the :root selector).
  5. Variables need not be declared in the :root selector and can be done further down the code in another selector. The downside to this would be that the variable cannot be called upon from above its location in the code (cascading rule).
a “local” variable

Conclusion

Storing variables can be very useful when coding a design because it allows for flexibility, in case of any changes in the design and even allows for an easier debugging process since you would only need to make any changes in one location, usually at the top of the code, and not throughout the code.

With future updates to browsers and HTML/CSS I would hope that the compatibility and functionality of CSS Variables and other functions take further steps into removing the need for preprocessors in order to allow for a more streamlined workflow.

Further Reading

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade