CSS is adopting many features by the passage of time. Here, we will see that what CSS Variable is & it's benefit of usage. If you're familiar with computer programming background you have noticed about work & need of variables
eg. var = 10;
What is variable?
A variable is kind of space
we occupy in memory
while declaring it.
Why we use Variable?
If you want to do something like plus
➕
two things or apply any mathematical operation eg. var a=10;
var b=10;
c=a+b;
now, variable c
has value of a
& b
. which is equal to c=20
don't worry! every language has its own syntax
for declaring variable but I have used here javaScript syntax
.
Let's focus on CSS Variable
,
What is CSS Variable?
CSS Variable is not rocket science. It works the same as we use other programming language variables but we can't apply any mathematical operation like + - * /
on CSS variable. we just use to take a space in memory by declaring any CSS property
as memory address & property's value
as a memory address value. that's it.
Why we use CSS Variable?
To understand this question, first we have to see visual answer.
We can see I have declared my CSS variable in :root
because it will apply to all root HTML which means whole HTML document more simple :root
is the parent element of the HTML page and inside the root, you can see more about parent and child elements in HTML-DOM
in my another article HTML-DOM manipulation, I have declared CSS variable & now it will apply to all it's children. You can also declare CSS variable in another parent/location like,
Here we have declared our CSS variable in my-container
& it is parent which means my-container
has child elements that's why it is parent. see in picture below,
Above, my-container
has its own element so if we declare CSS variable in my-container
it will work on only its child element which are, <p>
& <h4>
but it will not work on body
<p> I'm Child of body and my ancestor is root of HTML</p>
because this <p>
is not child of my-container
. For applying CSS variable body <p>
element, we must target its parent (body
OR root
)
eg. :root{--my-variable: #ddd}
here #ddd
is the code of a color.
Syntax to declare CSS varible
Syntax is not very difficult just you have to remember just two things
-
--
it is part of declaring CSS variable eg. (--xyz: abc) -
var()
while using it. now see some CSS variable examples You have noticed that I have only changed thevalue
eg.18px
ofproperty
font-size
.
Bullet Points:
- While declaring CSS Variables we just set the value eg.
18px
,#0001
,"Times New Roman", Georgia, Serif;
but the property name will remain same while using it. - Here
background-color: var(--my-background-color);
background-color
property name of CSS will ramain as it as but it's value now become dynamicvar(--my-background-color);
instead of#0001
.
Benefit of Using CSS Variable
Using CSS Variables we made our code dynamic.
Let's suppose you have written HTML
& CSS
with thousands of lines and after all, you want to change your CSS code eg. all <p> & <h1>
color
& font-size
then What you will do?
definitely, you have to change all lines where you have declared CSS property value & this become a time-consuming process. To counter these problem CSS Variables were introduced for changing your property's value
just in seconds by changing only 1 value of the property. Now see the real-world example,
Do you notice that --my-p-color
is applied on all <p>
elements which are children of <body>
tag & --my-font-size
just applied to its child which is <p>I'm Child of my-container & my ancestor is body</p>
beasuce --my-font-size
is declared in .my-container
that's why it works on only its child element. That's all about CSS Varibles. Hope now you are familiar with CSS Varibles.
Top comments (0)