Let's break the CSS variables 🤿

Hello there folks,

This post is part of our "20 days CSS animation"

20 Days of CSS animation post💪

🚩 Atul Prajapati 🇮🇳 ・ Jan 30 '21 ・ 1 min read

#css #html #beginners

In this post we are going to learn what is CSS veriables? Ok it's just a smart avoid copy pasting CSS code and repetitive CSS task. Don't scratch your head ha ha ha ha....

Ex. imagine you are working on some project and you want to use same color property again and again then you can store your certain value in CSS variable and use it anywhere you want.

Actully let's deep dive into CSS variables, So you can understand clearly.

This is how we can declare CSS variables.

:root
{
  --box-height: 100px;
  --box-width: 100px;
  --box-color: red;
}

This code you can see that we have declared variables like

--box-height: 100px;

in this tag we have declared variable for box height.
And we can assign it like

height: var(--box-height: 100px);

it will work just perfect.

If you still in some confusion checkout this codepen project :)

And if you guys interested in my free website templates please download them here 👉AtulCodex Marketplace 🏪.