DEV Community

Cover image for CSS Variables (CSS Custom properties) for Beginners

CSS Variables (CSS Custom properties) for Beginners

Kasie Udoka Success on June 18, 2024

In our projects, we often encounter repetitive values such as width, color, font, etc. These values can lead to redundancy in our work and make it ...
Collapse
 
wraith profile image
Jake Lundberg

CSS Variables are definitely one of my favorite new(ish) features in CSS. I don’t even want think back to when they weren’t a thing! 😂

a helpful tip for your future posts, when creating a code block with 3x ticks, if you follow the opening ticks with language you’re using you will get automatic code highlighting

so if you do this…

` ` `css
Enter fullscreen mode Exit fullscreen mode

(without the spaces)
it will turn this…

.myClass {
  —my-css-variable: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

into this…

.myClass {
  my-css-variable: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

keep up the good work! 😀

Collapse
 
udoka033 profile image
Kasie Udoka Success

Oh Wow
Thank you so much for this @wraith
I was looking for a way to do that.

Thanks for reading.

Collapse
 
mini2809 profile image
MINI JAIN

I thought declaring variables in css was only possible through preprocessors such as scss, not knowing this.Great addition to my knowledge. THANKS!

Collapse
 
udoka033 profile image
Kasie Udoka Success

I'm glad you learned something new.

Thanks for reading @mini2809

Collapse
 
karenpayneoregon profile image
Karen Payne

Well done.

Collapse
 
udoka033 profile image
Kasie Udoka Success

Thank You @karenpayneoregon

Collapse
 
atascii profile image
Martin M

What's the purpose of using const changeButton = document.getElementById('button') if the handleClick function is triggered directly from the HTML?

Collapse
 
udoka033 profile image
Kasie Udoka Success

Oh, thanks for your observation. I intended to show the two ways of triggering onclick, but I mistakenly skipped it in the article.

Collapse
 
sandeepkumarkuanar profile image
Sandeep Kumar Kuanar

This would definitely help in my smaller projects

Collapse
 
udoka033 profile image
Kasie Udoka Success

Thanks for reading @sandeepkumarkuanar

Collapse
 
c9hp profile image
C9

Does it mean we don't need to use sass for variables in css?

Collapse
 
udoka033 profile image
Kasie Udoka Success

CSS allows you to declare and use variables now.
However, if you have other project requirement that demands using Sass, you can then use Sass, but you don' t need to use sass for variables in CSS.

Thank you for reading @c9hp

Collapse
 
best_happy_0140a4eb45bede profile image
Best Happy

Thank you for posting this.

Collapse
 
udoka033 profile image
Kasie Udoka Success

I'm glad you like it @best_happy_0140a4eb45bede