Variables in CSS

5 min readAug 18, 2020

Variables are a feature used in almost all programming languages. In the realm of frontend development, variables were one of the most sought-after features in CSS. Previously, we could only utilize this feature in conjunction with CSS preprocessors. Drawbacks of using preprocessors, such as extended compilation times in large projects, became evident. When we look at where CSS stands today, it enables us to harness this feature without the need for any preprocessor.

When working on a project, we often need to use the same values for various elements (such as text colors, background colors, etc.). In such cases, rather than repeatedly writing the same code, defining a value to a variable once and calling this variable where needed will not only ensure consistency in our project but also facilitate its maintenance.

Variables enable us to manage CSS properties like colors, font types, and spacing values from a single point and maintain consistency throughout a codebase. By using variables, we can assign a value to a property and reuse it in different parts of our CSS code where it’s needed.

In this section, I will try to cover the following features of CSS variables:

How to define variables in CSS and set default values for these variables.
How can we use the variables we define in our project?
What is the dynamic nature of variables, and how do they work with media queries?
Current browser support status for variables.

Variable Declaration

Every preprocessor uses different methods to declare variables. For instance, in Sass, a variable is defined by prefixing the variable name with a “$” sign, while in Less, it uses the “@” sign. To declare a CSS variable, however, a definition is made with a double dash ( — ) before the variable name. The dash sign signals to the CSS parser that this is a CSS variable, and wherever this variable is used, the defined value of the variable is employed.

--primary-color: #1a73e8;

As you know, in JavaScript, we can define variables in two ways: globally and locally. The same applies to CSS variables as well.

:root {
  --primary-color: #1a73e8;
}

p {
  --secondary-color: #191970;
}

The :rootSelector stands in place of the root element of the document (i.e., it is based on it). For instance, in an HTML file, :rootrepresents the <html> tag. Consequently, variables defined within :root are considered global variables. On the other hand, the. --secondary-color variable is a local variable.

Variable names are case-sensitive. Thus,--primary-color and --primary-Color are two distinct variables.

:root {
  --primary-color: #1a73e8;
  --primary-Color: #191970;
}

Using Variables

In CSS, variables are called using the var() function. For example, if we wanted to use the value assigned to the --primary-color variable as the background color of a button:

:root {
  --primary-color: #1a73e8;
}

button {
  background-color: var(--primary-color);
}

we would need to make the following declaration.

CSS variables can only be used to set values for standard CSS properties. For instance, you cannot define a property name as a variable and use it as such.

:root {
  --top-border: border-top;
}

button {
  var(--top-border): 10px solid #1a73e8;
}

Furthermore, you cannot define a property value as a variable and use it as such.

:root {
  --text-color: 'color: orange';
}

button {
  var(--text-color);
}

One more thing that cannot be done is concatenating a variable with a string as part of a value.

:root {
  --base-font-size: 10;
}

body {
  font-size: var(--base-font-size) px;
}

Setting a Fallback

Using the var() function, we can assign a fallback value if the given variable is either undefined or holds an invalid value. The var() function can take up to two values. The first value must be a property name, and the second one is optional; it is used when the first value is invalid.

:root {
  --primary-color: #1a73e8;
}

button {
  background-color: var(--primary-color, blue);
}

If a value is assigned to the --primary-color variable, the background color will be #1a73e8; if it is not defined, then the background color will be the color value of blue.

Inside the var() function, we can also use a variable as the second value.

:root {
  --primary-color: #1a73e8;
  --secondary-color: #191970;
}

button {
  background-color: var(--primary-color, var(--secondary-color));
}

In the code block above, if a value is assigned to the --primary-color variable, the background color will be the value assigned to primary-color. If it is not defined, the background color will be the value assigned to secondary-color. If neither of the two variables is defined, the background color will be the initial value of the property.

Dynamic Structure and Usage with Media Queries

One of the greatest advantages of CSS variables is their dynamic nature. But what exactly does this dynamic structure entail?

Variables used with preprocessors possess a static structure, whereas in CSS, the situation is different. A variable defined in CSS has a dynamic nature, granting it the ability to be altered.

One of the areas where we use this most frequently is in conjunction with media queries for different screen sizes.

We can use CSS variables in conjunction with media queries, making it easier to manage styles for different screen sizes from a single point.

:root {
  --button-padding: 1rem;
}

@media (min-width: 576px) {
  :root {
    --button-padding: 2rem;
  }
}

button {
  padding: var(--button-padding);
}

In the example above, for screen widths up to 576px, the button’s padding value will be set to 1rem. Once the screen width exceeds 576px, the padding value will become 2rem.

Browser Support

In CSS, variables are supported by many modern browsers. While no version of Internet Explorer supports them, Microsoft Edge starting from version 15 and Safari starting from version 9.1 provide support. However, despite the support in Microsoft Edge 15, there are still a few issues present.