The CSS variables are just like simple variable of any programming language. These variables are used to store values and have a scope in which the variables can be used. A variable is defined by using two dashes(–) at the beginning and then the name which is case-sensitive. The benefit of variables is that it allows the same values to be reused at multiple places and updated/modified from one place. Also, the variable names are easier to understand and use, compared to the values of colors.
var( --custom-name, value )
Parameters: The variable var() accepts two parameters which are listed below:
- –custom-name It is a required parameter which accepts the custom property name.
- value: It is an optional parameter. It accepts fallback value which is used when custom property is invalid.
Supported Browsers: The browser supported by CSS variables are listed below:
- Google Chrome 49.0
- Internet Explorer 15.0
- Firefox 31.0
- Safari 9.1
- opera 36.0