Finally !!! CSS Variable has arrived.

CSS variables, more accurately known as CSS custom properties, are landing in Chrome 49. CSS is going to be like a CSS pre-processoritself such as SASS,LESS inthe future.  CSS variablesare now officially part of the CSS specification – details here.

CSSWG was experimenting about CSS variables since 2012 – details here . There is another news thatGoogle has now joined Mozilla by supporting this great feature.

Playing with CSS Variables.

1. How it works.

2. Override CSS variables.

3. Override CSS variables in media query.

4. CSS variable experiment with javascript.

5. Browser support.

1- How it works.

I already mentioned that CSS variables are known as CSS custom properties.

Create a root class in CSS file.

Create a Variable ( You can declare anything in variable such as color, width .. )

Call your variables anywhere you want in that css file (you can replace ‘element’ with ‘body’ in this below code) 

2) Override CSS Variables.

We can override all css variables – see the demo. 

3- Override CSS variables in media query.

We can include the variables with a different value in media query break points.

you can replace ‘element’ with ‘body’ in this below code 

4- CSS Variables experimenting with Javascript.

Sharing CSS Variables with JavaScript. 

5- Browser support.

Firefox:Version 31+ (Enabled by default)
Chrome:Version 49+ (Enabled by default).
Safari/IOS Safari:Version 9.1/9.3 (Enabled by default).
IE Edge:In development.

We can check browsers supporting details- can i use

Mozilla has posted an article about this – link 

Conclusion.

CSS had already introduced calculation featurescalcit is an amazing feature, another one isflex-box, now they have introduced a variable feature.
Without doubt, we can say CSS Variables will be a supreme feature in future, at the moment it works only in the latest version of browsers. Web developers are really excited with that CSS as it is going to be awesome.!!!