CSS Function - var()

The var() function in CSS is useful in adding a value to a custom property, also known as a CSS variable. Other than property values, the var() function can not be used for property names, selectors or any other property. Doing so might result in invalid syntax or a value that has no meaning.

Possible values

The var() function can have following values:

  • <custom-property-name>: represents the name of the variable / custom property.

    • Its an identifier that starts with two dashes (--).

    • CSS does not add any meaning to the custom properties, other than what is declared.

    • The custom properties are only useful to the author or user who declared it.

  • <declaration-value>: represents the fallback value for the variable / custom property.

    • Useful when the custom property is invalid.

    • The fallback value can contain any character except for characters that have special meaning such as newlines, unmatched closing brackets, like ), }, ], top-level semicolons, or exclamation marks.

    • It can be a custom property as well, that has been declared using the var() function.

Syntax

var( <custom-property-name> <declaration-value>? )

CSS var() - Declaring a custom property at root level

Following example demonstrates the use of var() function which is declared at root level:

<html>
<head>
<style>
   :root {
      --body-background-color: peachpuff;
   }

   div {
      background-color: var(--body-background-color);
      width: 300px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <h1>var() example</h1>
   <div></div>
</body>
</html>

In the example above, background-color is declared using the varible (--body-background-color) and is used for a div element, to set the background color of the div.

CSS var() - Declaring a custom property at a later level

The same result can be obtained, even when the custom property is declared later. So you can use the same example in the following manner:

<html>
<head>
<style>
   div {
      background-color: var(--body-background-color);
      width: 300px;
      height: 300px;
      border: 3px solid black;
   }

   :root {
      --body-background-color: peachpuff;
   }
</style>
</head>
<body>
   <h1>var() example</h1>
   <div></div>
</body>
</html>

CSS var() - Setting value to a custom property initially

In the given example the var() function is used where variable value is set and thus the fallback value is not used:

<html>
<head>
<style>
   /* title-color is set, and so the fallback value (red) will not be set  */
   .title {
      color: var(--title-color, red);
   }

   /* text-color is set, and so the fallback value (black) will not be set  */
   .content-text {
      color: var(--text-color,black);
   }

   div {
      --title-color: black;
      --text-color: blue;
   }
</style>
</head>
<body>
   <div>
      <h1 class="title">Title</h1>
      <p class="content-text">Content</p>
    </div>
</body>
</html>

CSS var() - Fallback value of a custom property is set

In the given example the var() function is used where variable value is not set and thus the fallback value is used:

<html>
<head>
<style>
   /* title-color is not set, and so the fallback value (red) will be set  */
   .title {
      color: var(--title-color, red);
   }

   /* text-color is not set, and so the fallback value (black) will be set  */
   .content-text {
      color: var(--text-color, royalblue);
   }
</style>
</head>
<body>
   <div>
      <h1 class="title">Title</h1>
      <p class="content-text">Content</p>
    </div>
</body>
</html>

CSS var() - Using a custom property as a fallback

In the given example the var() function is used where variable value is not set and thus the fallback value is set using another var() function:

<html>
<head>
<style>
   :root {
      --body-background-color: peachpuff;
   }

   div {
      background-color: var(--sample-body-color, var(--body-background-color, pink));
      width: 300px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <h1>var() example</h1>
   <div></div>
</body>
</html>

CSS var() - Using a custom property set in another file

Following example demonstrates the use of var() function where a custom property is set in another file. In this example, custom1.css and custom2.css are two files which has CSS styling described in it, which are given reference in the <head> section of the html. The css files are shown below for reference:

The code snippet shown is of custom1.css, where the var() function is used to declare a variable --main-bg-color as the background color.

/* custom1.css */
div {
   background-color: var(--main-bg-color);
   width: 200px;
   height: 200px;
   border: 3px solid black;
}

The code snippet shown is of custom2.css, where the variable --main-bg-color is assigned a value of "lightblue" at the root level.

/* custom2.css */
:root {
   --main-bg-color: lightblue;
}

In the example given below, the variable that was assigned a value at root level in custom2.css file is passed to the background-color property in a div element in custom1.css file. These css files are linked in the html and thus the styling is applied to the div element here. Thus th background color of the div is "lightblue".

<html>
<head>
   <link rel="stylesheet" href="custom1.css" />
   <link rel="stylesheet" href="custom2.css" />
</head>
<body>
   <div></div>
</body>
</html>
Advertisements