var()

var() function can be used to return the value of a CSS variable. It can also be used to assign a value to an existing variable.

Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector.

The variable name must begin with two dashes -- and is case sensitive!

	// Definition -
	--variable-name : value;

	// Use -
	background-color : var(--variable-name);

Consider the following example. The following example first defines a global custom property named "--main-bg-color", then it uses the var() function to insert the value of the custom property later in the style sheet:

	:root {
		--main-bg-color: coral; 
	}

	#div1 {
		background-color: var(--main-bg-color); 
	}

	#div2 {
		background-color: var(--main-bg-color);
	}

The following example uses the var() function to insert several custom property values:

	:root {
	    --main-bg-color: coral;
	    --main-txt-color: blue; 
	    --main-padding: 15px; 
	}

	#div1 {
	    background-color: var(--main-bg-color);
	    color: var(--main-txt-color);
	    padding: var(--main-padding);
	}

	#div2 {
	    background-color: var(--main-bg-color);
	    color: var(--main-txt-color);
	    padding: var(--main-padding);
	}