Never Suffer From CSS VARIABLES

The var() function is used to insert the value of a custom property.Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you have to use either the :root or the body selector.
Like other variables in any other programming language CSS variables also allow us to store a value and then use it later in our code. A CSS variable stores any CSS property value, like color, size, font-family, position, etc.
The syntax of CSS Custom properties is simple and concise.CSS variables are prefixed with double dashes ( – – ) and you can access them using the var() function.
Check the syntax of the var() function is as below:

var(custom-name, value)

Complex websites have a vast amounts of CSS, often with a lot of repeated values. As example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Custom properties let a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example,

:root {
–main-bg-color: red;
}

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

#div2 {
background-color: var(–main-bg-color);
}
When the browser showdown an invalid var() substitution, the initial or inherited value of the property is used.
Since April 2017, this property is supported by all modern browsers, they provide an effective way to write consistent, clean styles.The following first browser versions fully support CSS variables => Chrome 49.0, Internet Explorer 15.0, Mozilla Firefox 31.0, Safari 9.1, Opera 36.0

“Cleonix Academy” under “Cleonix Technologies” is a Kolkata based Web design training institute specializing in Website Design, Graphic Design, Web Development, Digital Marketing, Search Engine Optimization.For learning more about HTML & CSS contact now.