CSS Variables Tutorial

🚨 IMPORTANT:

One of the biggest problems with CSS for many years was the lack of variables. Pre-processors like SASS and LESS were used to solve this problem, but now CSS has its own variable system! In this video I will be breaking down exactly how CSS variables work. We will be covering their syntax, use cases, and how to use them in JavaScript. In the end of this video we will have a fully functioning, albeit ugly, website with theme swapping buttons.

View The Code:

Twitter:

GitHub:

CodePen:

#CSSVariables #CSS #WebDevelopment

[WebDevSimplified]

I hope you all enjoyed this video. Let me know what you want to see next!

[nerdiloo]

Nice I've been waiting for CSS to evolve. I'd rather the 3 'pillars' of front end (html, css, javascript) mature instead of have to add 15 more 'helper' libraries to my resume.

[sanjitselvan]

By far the best and the easiest way to implement theming in an app without needing any external libraries. Thanks!

[itskrox-johnochuro]

Just from learning this concept and I didn’t know it could fit into a 8 minute video! You’re a master teacher!

[harag]

Nice didn't even know css had variables. Certainly going to be useful. Thanks

[altheometrix]

Took me an hour to understand all these by connecting the dots of your lecture. Great video man. I didn't know JavaScript. (But I understand the C, Python etc. functions as I've done them before)

[NOTHING-enue]

thanks a lot i was in trouble with VARs in css and now i learned you're best teacher

[AhmadAlMutawa_abunoor]

Wonderful. I was avoiding SASS because I can’t guarantee that dependency on external style transpiler at production environment. Having CSS support this feature on its own, is massive advantage.

[halhelms]

Thanks very much for making these videos. Coming from the perspective of a programmer, I find them really helpful.

[eddiejaoude]

Nice, I use SCSS, I didn’t realise basis css could do it 👍

[CodeWithKarl]

i have been trying to find tutorial like this it's very informative:) thanks

[osegocodes]

To everybody getting started on web development, lets connect am a beginner

[AnnieTaylorChen]

I definitely LOVE this feature. I used it in my last project. At the beginning I was thinking, ah... such a trouble to set up stuff and converting to hsla, but I want to use new stuff so I did anyway, later it becomes real handy. Because I remember the name for "branding green color", "brand beige", "danger red" better than a bunch of hex code, or rgb or hsla (my another fav, cos it's intuitive and human-friendly). Later in my project I found my branding green color is a bit too light and provides lower contract, I gotta work on this accessibility issue but don't want to compromise on the branding palette, I end up changing the the lightness in hsla in my variable, then all the branding green got changed at once. :D Now I'm in love with variable.
So my question is: is it still necessary to learn SASS? I just got an intro... not sure how useful it is....

[malikrajat]

Ohhh, really thank you... for such awesome content.

You save my whole day man.
I appreciate your effort

[BansaGaming]

Great video really want to learn css and javascript

[mumps]

LOVE these videos, Kyle, thanks. But -- to anyone who can answer -- I am so perplexed by one piece of this, and I think it may point to a more fundamental lack of understanding on my part of timing and order of application of CSS rules to the elements. Simply put -- how does merely changing the value of the variable in the .one rule actually change the background color of div? If we swap things around between .one and .child --- so, in .one we would set background-color to var(...), and in .child we set div-background-color to blue -- we end up with div one with a red background and nothing set to a blue background. Two hours now and I just cannot puzzle this one out.
EDIT: Oh. Maybe..nothing is actually setting background color of the one div as a whole. The redefinition of div-background-color in the .one rule is defining a new variable that is valid only in the scope of that div, and then each .child element within that div is set based on the .child rule...but once outside the .one class, the global (:root) definition of div-background-color is now in effect and is applied to the .child elements in div two. ???

[mcrain]

Thx I was really confused over what is the difference between classes and roots

[Anthony-wgfn]

why in the .one class did you not have to retype ... background-color:

[Toasti]

Thank you, your video's actually help a lot.

[ManontheOutside]

Great tutorial, nice and simple, thanks!