A Quick Start Guide to Understand — What CSS Variables are and How they make CSS Reactive and even more Powerful.

CSS Variables which are also called CSS Custom Properties are getting quite popular these days, due to their high-end capabilities and reactive nature. After reading this piece of writing, you will be able to understand how they can be used in real-world code scenarios.

Getting Started

The article is intended for Intermediate level front-end devs, (or designers who write code). It is expected that you have a basic understanding of CSS, HTML and a bit* of JavaScript.

What are Variables (or CSS Variables)?

In general, a Variable is a container which references or points to some data value, which can be accessed anywhere in the code block and in return it references to the pointing value as a result.

The CSS Variable also behaves in the very similar manner.

The Syntax

The generic syntax for CSS Variables is shown below —

/*Declaration of Variables*/
:root{
--sans-serif: "Helvetica", Arial, sans-serif;
--serif: "Georgia", Cambria, serif;
}
/*Accessing the Declared Variables*/
h1,h2,h3,h4,h5,h6{
font-family: var(--san-serif);
}
p, ul, dl, ol, a{
font-family: var(--serif);
}

Syntax Explanation

A variable is declared with “--” prefix followed by the variable name.

A variable can be accessed anywhere in the *.css or *.html (using inline CSS) with “var” function. For example, a variable named “color” with a value “blue” can be declared as “--color: blue” and can be accessed as var(--color).

Don’t get Confused with JavaScript Syntax. In JavaScript, “var” is used to declare the variable while in CSS “var” is used to access the variable’s reference value.

Let’s see a basic example below –

See the Pen ‘https://codepen.io/nitishkmrk/pen/MVvEJr/‘>CSS Variables #1 by Nitish Khagwal (@nitishkmrk) on CodePen.light

In the example above, We have declared two variables named "--color-dark" and "--color-bright". We have accessed the values of these two variables in both "bright" and "dark" classes. That is how CSS Variables can be used at a glance, instead of writing same property values multiple times, we have just referenced to the variables.

What problems do CSS Variables or Custom Properties resolve?

Let’s look into the advantages of using CSS variables –

1. Scalable and Readable Code

In traditional CSS Methodology, we repeat the CSS property values quite often. It not only makes our code clumsy, but also makes it hard to read, update the changes and managing it at a larger scale.

2. Reactive Elements

Once the CSS Variable’s reference value is changed, simultaneously the respective elements are updated and repainted in the browser as per new reference values.

3. Productive Workflow

CSS variables make our dev process a bit faster. If a property value is supposed to be updated, we just need to update the variable’s reference value rather than hunting for each property value and updating it.

4. Powers Mathematical Calculations

You can perform basic calculations using basic mathematical operators in CSS, using “calc()” function. Only a single parameter with two operands and one operator can be passed through the calc() function and the result of the expression is used as the CSS property value.

It supports the major mathematical operators  (+) Addition, (-) Subtraction, (*) Multiplication and (/) Division.

The generic syntax for the calc() function is shown below —

calc(Operand1 [Operator] Operand2);

The good part is — CSS Variable can be passed through the calc function as an operand, which makes the calc() function even more dynamic and useful.

Browser Support

CSS Variables can only be used on modern browsers only and if your target browser is quite outdated you should rather not prefer using CSS Variables.

But Why not? People are sending spaceman to the mars these days, so at least you should be that liberal with the code.

Hope, you got a basic overview of how CSS Variables or Custom Properties works and makes your workflow scalable and more productive.

Voila! The part 2 has alreadybeen published and will help you in Understanding the Scope in CSS Variables.