html

The var() function in CSS | Explained

CSS is a styling language that consists of many distinguishing features. One such characteristic is that it allows its users to declare customized properties which are also referred to as CSS variables. These variables consist of specific names and values, and once declared these can be used anywhere in the file. To use these variables CSS provides a function by the name var() function which we are going to discuss in detail in this write-up. This post includes the following topics.

1. var() Function

2. Advantages of var() function

The var() function in CSS

For the purpose of including a customized property or a CSS variable that can be used elsewhere in the style sheet, the var() function is used.

Syntax

var() = var (--property name, property value)

Parameters explained

property name: Specifies the name of the customized property. It is a required parameter.

Property value: Specifies the value of the customized property. It is an optional parameter.

Points to remember!

1. CSS rules define that the CSS variables have either a local or a global scope. A global variable can be used anywhere in the whole document; meanwhile, a local variable can be retrieved only by the selector it is defined in.

2. For the purpose of creating a global variable using the var() function, it must be declared in the :root selector

3. Meanwhile, a local variable can be created inside any selector.

Example 1

Suppose you want to use the var() function while declaring global variables.

HTML

<div>

<p>This is a paragraph.</p>

</div>

In the code snippet above, we have simply created a div container and nested a <p> element inside that div container.

CSS

:root {

--pink: #ffc0cb;

--white: #ffffff;

--brown: #964b00;

--blue: #0000ff;

}

body {

background-color: var(--pink);

}

div {

color: var(--blue);

background-color: var(--white);

padding: 15px;

}

p {

background-color: var(--white);

color: var(--blue);

border: 3px solid var(--brown);

padding: 40px;

}

In the above code, we have defined some global variables in the :root selector each corresponding to a specific color. Then we are using those global variables in the whole document where required using the var() function. The advantage of making these global variables and then using them in the var() function is that in this particular case you don’t need to define colors of elements over and over again instead just use the var() function.

Output

The var() function is working properly.

Example 2

Let’s understand the var() function further with another example.

HTML

Enter your name: <input type="text" class="input1">

<br><br>

Enter your contact: <input type="text" class="input2">

<br><br>

Enter your email: <input type="text" class="input3">

<br><br>

<button>Submit

Here we have created three input fields and a button.

CSS

:root {

--main-bg-color: pink;

--main-text-color: blue;

--main-padding: 5px;

}

.input1 {

background-color: var(--main-bg-color);

color: var(--main-text-color);

padding: var(--main-padding);

}

.input2 {

background-color: var(--main-bg-color);

color: var(--main-text-color);

padding: var(--main-padding);

}

.input3 {

background-color: var(--main-bg-color);

color: var(--main-text-color);

padding: var(--main-padding);

}

button {

background-color: var(--main-bg-color);

color: var(--main-text-color);

padding: var(--main-padding);

}

In the above code, we are declaring three global variables: one for background color, one for text color, and last one for padding. We are then using these three global variables to style our input fields and buttons.

Output

The var() function is working properly.

Note: Remember that the user-defined CSS properties are case-sensitive and the property name must start with double hyphens.

Advantages of var() function

There are many obvious advantages of using the var() function. We have listed some of them below.

1. It makes the understability and readability of the code more clear.

2. As demonstrated in the examples above it makes it easier to use color properties.

Conclusion

The var() function lets you define a customized property or a CSS variable that can be used elsewhere in the style sheet once declared. You can declare a global variable in the :root selector and use it in the whole document using the var() function, moreover, you can also create a local variable inside a specific selector and then later use it through the var() function. You must specify the custom property name or CSS variable starting with double hyphens, furthermore, these are case-sensitive so special care must be taken. This post discusses the var() function in CSS in detail along with demonstrating some relevant examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.