CSS Custom Properties (CSS Variables)
CSS custom properties are the entities that are defined by CSS author themselves to obtain the feature of reusability of code all over the document. For example, A project may involve very complex CSS, and same color code may get repeated hundred times. So if we want to change that color, then we need to modify the color value hundred times. But using variables, we can change value at one place that can be referenced in multiple places.
Notation of a CSS variable is preceded by double dash “–” as shown below:
[html]–primary-text-color: #cccccc;[/html]
And can be accessed as:
[html]color: var(–primary-text-color);[/html]
Meaningful variable names are easier to understand like –primary-text-color is more meaningful then #cccccc.
Step1: Declaring a variable:
[html]:root {
–main-bg-color: #f0f0f0;
}[/html]
Step2: Using a variable:
[html]#variable-example h1 {
background-color: var(–main-bg-color);
}[/html]
Advantages:
- Reduce redundancy: When CSS variable values change (e.g. media query or another state), the browser repaints as needed.
- Can be accessible and manipulated using JavaScript.
- Potential to polyfill future CSS feature.
- Fully compatible with LESS and SASS.
- No need of a preprocessor.
- One of the major advantages of CSS variables is – they cascade means you can leverage custom properties inside of media queries to aid with responsive design. However, CSS preprocessors are unable to define variables inside of media queries.
[html]:root {
–value: 4px;
}
section {
margin: var(–value);
}
@media (min-width: 600px) {
:root {
–value: 16px;
}
}[/html]
The syntax may seem strange at first look; a question may arise why it’s not just $gutter or %gutter or &gutter. The answer is to make it different from Sass and Less variables. So that it can be compatible with both. CSS variables are case sensitive and follow standard cascade rules so that you can define the same property at different levels of specificity.
CSS code:
[html]:root { –text-color: blue; }
div { –text-color: green; }
#red-text { –text-color: red; }
* { color: var(–text-color); }[/html]
HTML code:
[html]<p>This text is inside the paragraph</p>
<div>This is the text of div whose color is set to be green.</div></br>
<div id="red-text">
This text is place inside a div with id – ‘red-text’. That’s why I am red in color.
<p>This paragraph is place inside red-text div, that’s why red in color because of inheritance.</p>
</div>
Just to test color of the body content.[/html]
The output of the above code is shown below:
This text is inside the paragraph
This is the text of div whose color is set to be green.
This text is placed inside a div with id – ‘red-texthandled That’s why I am red in color.
This paragraph is placed inside red-text div, that’s why red in color because of inheritance.
Just to test color of the body content.
Click here to see the Live Demo of the above example.
It is also possible to have custom properties that derive their value from other custom properties.
[html]:root {
–basic-color: red;
–logo-text: var(–basic-color);
}[/html]
Rules:-
1) Variables cannot be property names.
[html].demo1 {
–gap: padding-top;
var(–gap): 25px;
}[/html]
Above CSS will throw an error.
2) A value can’t be (naively) build where part of it is provided by a variable:
[html].demo2 {
–side: 22;
margin-top: var(–side)px;
}[/html]
Above fall-back can be handled by using calc() function.
[html] .demo2 {
–side: 22;
margin-top: calc(var(–side) * 1px);
}[/html]
Use of CSS variables in JavaScript
To get the value of a custom property at runtime, getPropertyValue() method is used. Similarly, to set the value of a custom property at runtime, setProperty() method is used.
Browser support
Currently Chrome 49, Firefox 42, Safari 9.1, and iOS Safari 9.3 support custom properties.
Happy Learning
