DEV Community

Cover image for Let's break the CSS variables ๐Ÿคฟ

Let's break the CSS variables ๐Ÿคฟ

Hello there folks,

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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 ๐Ÿช.

Top comments (0)