The Next generation of CSS is CSS custom property

CSS Variables

We all are familiar with CSS (Cascading Style Sheet). Earlier we used to integrate a static CSS on our web page to make a webpage very interactive then we got a new concept of dynamic or variable CSS. The only options to make CSS more manageable with the help of variables were SASS and LESS, which do have subtle differences in how they handle variables but essentially do the same thing. Due to some limitations in the preprocessor CSS (SASS and LESS), we got a new concept that is CSS custom property. Sometimes known as ‘CSS variables’.

So the question comes is why do we need a custom property if we have the preprocessor CSS?

When we started the implementation of preprocessor CSS we encountered with some challenges like

  • You can use them without the need of a preprocessor.
  • They cascade. You can set a variable inside any selector to set or override its current value.
  • When their values change (e.g. media query or other state), the browser repaints as needed.
  • You can access and manipulate them in JavaScript.

With SCSS we use a dollar symbol to denote a variable:

$color-red: #d33a2c;

In Less we use an @ symbol:

@smashing-red: #d33a2c;

Custom properties follow a similar conventions and use a -- prefix.In order to use them, prepend a -- to the front of the variable name of your custom property.

:root { --color-red: #d33a2c; }
.color-text {
color: var(--color-red);
}

SASS variables are replaced with their values as the preprocessor produces its CSS output long before the browser interprets the code, while CSS custom properties are evaluated by the browser at runtime.

Another Example with inheritance

:root {   --color: red; } 
body { --color: orange; }
h2 { color: var(--color); }

The :root selector allows you to target the highest-level element in the DOM, or document tree. So, variables declared in this way are kind of scoped to the global scope.
With native CSS variables, things are a little different. You reference a variable by using the var() function.

Any <h2>will be orange, because any <h2> will be a child of <body>, which has a higher applicable specificity.

Note- You could even re-set variables within media queries and have those new values cascade through everywhere using them, something that just isn’t possible with preprocessor variables.
CSS variables are case-sensitive.

You also can’t do math. You need the CSS calc() function for that. I’ll discuss examples as we proceed.

/*this is wrong */.margin {--space: 20px * 2;font-size:  var(--space);  //not 40px}

If you must do math, then use the calc() function like so:

.margin {--space: calc(20px * 2);font-size:  var(--space);  /*equals 40px*/}

Theming is possible with the current CSS tools

Theming is possible with the current CSS tools, but poses a big architectural challenge: If SASS is being used for theming, it makes real-time previews very difficult, because the code has to be preprocessed on a server, or a lot of CSS needs to be overwritten with theme-specific classes, making the code hard to maintain. CSS variables allow for themes that are easy to maintain, and that can be previewed by a user in real time with minimal effort.

Below is the example of Theming

HTML<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
<label>Spacing:</label>
<input type="range" id="spacing" min="10" max="200" value="10">

<label>Blur:</label>
<input type="range" id="blur" min="0" max="25" value="10">

<label>Base Color</label>
<input type="color" id="base" value="#ffc600">
</div>

<img src="http://unsplash.it/800/500?image=899">

<p class="love">Made by <a href="https://twitter.com/wesbos">@wesbos</a></p>

<p class="love">Chrome 49+, Firefox 31+</p>

Below is the css of theming

:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
body {
text-align: center;
}
img {
padding: var(--spacing);
background: var(--base);
-webkit-filter: blur(var(--blur));
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
/*
misc styles, nothing to do with CSS variables
*/
body {
background: #193549;
color: white;
font-family: 'helvetica neue', sans-serif;
font-weight: 100;
font-size: 50px;
}
.controls {
margin-bottom: 50px;
}
a {
color: var(--base);
text-decoration: none;
}
input {
width:100px;
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ranbir Kumar Das

Ranbir Kumar Das

260 Followers

I M Believer, Helper, Chaser, Thinker, Rich, Explorer, Prayer, Boss, Freedom, Fearless, Investor, Faith, Creator, trillionaire, CSM, Salesforce certified