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.
Full Training Courses: IAmTimCorey.com
Source Code: leadmagnets.app/?Resource=Css...
Mailing List: signup.iamtimcorey.com/

[@jesusdelarua5995]

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

[@IAmTimCorey]

Glad to hear it.

[@RioTheHitman]

This is awesome Im glad they added this

[@IAmTimCorey]

I’m glad you like them.

[@andergarcia1115]

Thanks Master, your way of teaching is the best

[@IAmTimCorey]

You are welcome.

[@jayvyas1342]

Great Tim. Learn something new, Thanks you!

[@IAmTimCorey]

You are welcome.

[@richardnesh5919]

Excellent info. Nice to see you using VS Code.

[@IAmTimCorey]

Thanks!

[@vikikroft7228]

Thank you Tim. Tim how to start CRM systems.

[@IAmTimCorey]

The place you start is by building LOTS of smaller applications. Trying to build a CRM system is like saying "I want to fly a rocket to the moon" as your first flight ever. It is really complicated.

[@nickysmusic4592]

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

[@IAmTimCorey]

I use a plug-in called Live Server.

[@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)?

[@IAmTimCorey]

Yep.

[@AabirKashif]

Awesome!

[@IAmTimCorey]

Thanks!

[@TheProfessionalGamerSS4444]

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.

[@IAmTimCorey]

Yes, you can do that.

[@waynehawkins654]

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

[@IAmTimCorey]

I don't know that you could do this. However, you could apply classes that would essentially do the same thing if you want.

[@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.

[@IAmTimCorey]

What can you do with an SCSS variable that CSS variables don’t provide? You could even mix the two if needed but I’ve never seen the use case for that.

[@davidschinsing8789]

Nice!

[@IAmTimCorey]

Thanks!

[@shaiarocks]

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

[@IAmTimCorey]

Yep, root is a pseudo-class, which means it effectively makes the variables into global variables. And yes, they can cascade like anything else in CSS, so you can define them at any level or re-define them at any level. There are a lot of things like this in CSS3 that people aren't aware of. Same with HTML5. That's why I spent so much time in the Web Development Mastercourse covering topics like this. HTML and CSS have changed a lot in the past few years.

[@RioTheHitman]

Is there any loops available?

[@IAmTimCorey]

I would encourage you not to treat CSS like a programming language. It is a styling language.

[@user-bb3um9kr5i]

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

[@IAmTimCorey]

You are welcome. And I’m assuming the SASS comment is a joke.

[@nested9301]

hmm you are doing css now 😶

[@IAmTimCorey]

Yep. I cover the supporting technologies around C# and the web is a big one.

[@mikebreeden6071]

He does it all 😁

[@jeffsherman9638]

First time I heard of variables in CSS