Floxus Education Team Blogs

CSS Custom Properties using Var() function

Photo by Pankaj Patel on Unsplash

CSS Custom Properties using Var() function

Floxus Education's photo
Floxus Education
·

7 min read

Table of contents

Why is it needed?

If you have been following web development for some time you would the hype around CSS Custom Properties. So let’s see Why So Hype ??( read in Heath Ledger Joker tone 😜)

We all are habituated to writing CSS and specifying properties for elements. However many times to maintain a similarity across the website we tend to write repetitive code. One of the major goals for developers is to reduce this repetitive code enabling easy, fast ways to change properties and enable efficient code writing and code debugging, and code refactoring.

This is where CSS Variables come into play . Take a look at the code below and see the amount of repetition used in the CSS file.

.list1 {
  color: white;
  background-color: darkviolet;
  margin: 2rem;
  width: 50px;
  height: 50px;
  display: block;
}

.list2 {
  color: white;
  background-color: darkblue;
  margin: 2rem;
  width: 150px;
  height: 70px;
  display: block;
}
.list3 {
  color: white;
  background-color: darkviolet;
  margin: 2rem;
  width: 75px;
}
.txt1 {
  background-color: darkviolet;
}

Here is a Codepen Example with HTML and CSS to show the code.

https://codepen.io/aashirwad01/pen/XWzgKzN

Solution: So What to do?

To avoid such a need for repetition we can define properties using CSS variables to write once and use throughout the code.

This also enables us to change property once and update throughout the doc without having to change it all.

Thus facilitating easy debugging and refactoring of code alongside way less repetition.

CSS variables or also known as Custom CSS properties are values defined by the author to use throughout a document.

They are set using custom property notation (e.g. —main- color : black) and are accessed using var() function (e.g. color : var( —main-color);)

This might not look a big deal in small code however big websites and in complex code, we might use the same color in hundreds of places requiring global search and update for changing a simple color 😪.

Custom properties allow us to store ( not such a good term to use we will see why later 😬) and reference in multiple places 😎.

How to use it?

In order to define any custom property we begin, its name with a double hyphen(—). and valid CSS property value. Just like any other CSS property, it is written within double brackets { } i.e a rule set.

:root {
  --main-bg-color: darkviolet;
}

element {
  --text-color: white;
}

You might have noticed:root in the above code. It is a pseudo-class that allows us to define properties within it that can be used globally across entire HTML.

You can learn about :root from below MDN doc.

:root - CSS: Cascading Style Sheets | MDN

Using it in Code

Enough Chitchat! Let’s start using it in Code 😋

So take an example of the above defined code .Pasting here again for reference.

.list1 {
  color: white;
  background-color: darkviolet;
  margin: 2rem;
  width: 50px;
  height: 50px;
  display: block;
}

.list2 {
  color: white;
  background-color: darkblue;
  margin: 2rem;
  width: 150px;
  height: 70px;
  display: block;
}
.list3 {
  color: white;
  background-color: darkviolet;
  margin: 2rem;
  width: 75px;
}
.txt1 {
  background-color: darkviolet;
}

Here we declare a custom property of —main-bg-color in root and use it wherever required in code. Pretty Dope 😏

The result is the same, yet this is very useful for refactoring the style of the site at once.

:root{
  --main-bg-color:darkviolet;
}

.list1 {
  color: white;
  background-color: var(--main-bg-color);
  margin: 2rem;
  width: 50px;
  height: 50px;
  display: block;
}

.list2 {
  color: white;
  background-color: darkblue;
  margin: 2rem;
  width: 150px;
  height: 70px;
  display: block;
}
.list3 {
  color: white;
  background-color: var(--main-bg-color);
  margin: 2rem;
  width: 75px;
}
.txt1 {
  background-color: var(--main-bg-color);
}

Let me share a secret tip 🤫

To see and use Var() in CSS here is the above code’s codepen snippet.

https://codepen.io/aashirwad01/pen/ZEayBew

Splitting Colors using Custom Properties 😳

This is one of the coolest use of custom properties 😎

Say we can define different values for hsl in custom variables and we can use combinations of them together or can change the color value individually in specific cases.

https://codepen.io/aashirwad01/pen/vYWZxgw

Here is an article to see how individual values in elements can be changed in CSS.

https://css-tricks.com/now-css-custom-properties-thing-value-parts-can-changed-individually/

How to use Calc() with Custom properties 💪

Here is small sample code to see how to use calc() with var() function .

.d2{

  --spacing: 1.2rem;
  padding: calc(var(--spacing) / 2));



}

Custom property fallbacks

Say we have declared a custom property, what will happen if we don’t provide any value to the variable set 🤔

The callback will use the second comma-separated value instead 😏

For e.g

html {
  font-family: var(--fonts, Helvetica, Arial, sans-serif);
}

Here if —fonts doesn’t have any value specified font family takes additional fallback values 🤩

We can also have a series of fallbacks, but for that we need them to be nested.

Take this example :

html {
  font-family: var(--fonts, var(--fontsfallback,Arial);
}

Pretty Cool 😁

Now, What will happen if the wrong value is given to Custom Property? 🥲

Whenever a invalid substitution in var() is used , either the initial value or the inherited value is used .

Let’s see the below code 

<p class="para">Because Var() is the hero CSS deserves, 
but not the one it knows right now </p>

Let’s look at the CSS code ( wherein lies the mis step 😶)

:root { --text-color: 2rem; }

.para{
  color:var(--text-color);

}

See how we have written 2rem for —text-color property . So the resulting .para has a default color set for it which is black!

Since there is no parent from which .para could inherit any color, the initial color which is default is used instead of the inherited one.

Untitled

On that note let’s see Inheritance of Custom Properties 🤗

Inheritance of Custom Properties

For reference here is the codepen snippet below.

Below is a short description of how divs are arranged.

We have a div 1 with class d1 within which we have

  • div 2 with class d2
    • Inside div 2 we have div 3 with class d3 and div 4 with class d4

https://codepen.io/aashirwad01/pen/rNYwWjR

In the above case, we have property spacing to define padding spacing in class d2 and padding spacing and margin spacing in class d3.

We observe that :

  • In Class d2 padding spacing is 1.2rem. Specified using local custom property spacing
  • In Class d3 padding spacing is 2rem and margin-bottom is also 2rem. Specified using local custom property spacing.
  • In Class d4 padding spacing is 1.2rem ( inherited from class d2).

Gotcha! Does var “store” values? 🤔

Future of CSS

We have seen how using the var() function we create a CSS Variable which gets substituted for the value of the Custom Property it refers to.

There is a suggestion for “Higher Level Custom Properties”.

Custom Properties that control a number of other CSS Properties. As per the proposal right now we have a new @if at-rule and alongside var() this would make custom properties Kaboom 💥💥.

Also, Atomic CSS is also in trend and hype these are immutable classes that have complete responsibility of applying a unit style to the selected component of the UI.

In Short and Crisp way Future of CSS is not Just Monstrous “ it’s Ahead Of The Curve “😉

(Comment on how you used Var() and specifically comment on How many of my Batman Movie dialogues you Got 😉 )

CSSWeb Developmentvariables