How To Use Variables in CSS without SASS or LESS in 10 Minutes or Less

CSS has changed dramatically in recent years, and most people don't seem to be aware of those changes. One of the changes in CSS3 is the ability to use variables in CSS. We used to need SCSS, SASS, or LESS to get CSS variables. Now we can do so natively in CSS.

[jesusdelarua]

Thank you Tim.
I always learn something new from your videos.

[RioTheHitman]

This is awesome Im glad they added this

[jayvyas]

Great Tim. Learn something new, Thanks you!

[andergarcia]

Thanks Master, your way of teaching is the best

[webluke]

It wasn't directly mentioned, but I am guessing you can put all kinds of variable values, let that be a color, font, size, or other var(--variable)?

[richardnesh]

Excellent info. Nice to see you using VS Code.

[vikikroft]

Thank you Tim.
Tim how to start CRM systems.

[TheProfessionalGamerSS]

Is it possible to change the variable dynamically using JavaScript? I’m thinking like what if you provided a control on your website to change the color and the user change the color and you wanted it to go in your style variable so it could affect the whole site.

[nickysmusic]

Great video, how did you get VScode and your web browswer to work in sync?

[waynehawkins]

Nice. What about storing in a C# string and change at run time in a Blazor Razor page. Can we do this?

[VeaceslavBARBARII]

I'm wondering if there's a tool that would convert SASS/SCSS variables into CSS ones for me, so that I could leverage static analysis on SASS variables yet have the flexibility of dynamically modifying CSS variables using JavaScript.

[shaiarocks]

":root" is a css keyword? Can I have other css variable sections? maybe per page or something?

[bbumkri]

Please use less sass in video titles.
Thanks for the video, a nifty trick i will use.