CSS Variables - An introduction to CSS custom properties

Подписаться 915 тыс.

Просмотров 117 тыс.

50% 1

CSS variables (also known as CSS Custom Properties) are a really powerful-and underused-feature available in CSS today.
They are very similar to Sass variables if you have any experience with them, but they actually have more functionality than variables from preprocessors! (If you've never heard of Sass, you can read more about it here: sass-lang.com/)
This video is the start of a deep dive CSS variables tutorial series. In this video, I look at the very basics of them. From what CSS variables are and why they are awesome, as well as how to write and use them.
Later on in this series, we'll also look at how to create fallbacks for older browsers, as well as how JavaScript and CSS variables are awesome, and much more.
Checkout the CodePen I was using: codepen.io/kevinpowell/pen/Ky...
---
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Опубликовано:

19 дек 2017

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 169

@adelsimohamed7467 Год назад

coming from The Odin Project curriculum, your videos all awesome thank u.

@porobertdev 7 месяцев назад

If you're here from The Odin Project, the only new thing you'll learn is that you can redefine the custom properties (variables) that you make in specific selectors, but isn't really recommended. Still, watching the whole video and doing some practice helps. And besides, you already know by now how amazing Kevin's videos are 🙂

@Soldknight324 6 месяцев назад

Although reading is good, I'm a really visual guy. Always like when TOP gives a link to a video that just goes over everything again 😂

@porobertdev 6 месяцев назад

@@Soldknight324 I think I watched every video from 'additional resources' 😂. Both, reading and watching helps me. Also, the scrimba videos that TOP linked at foundations were 🔥 Where are you so far now in the curriculum? I'm at the admin dashboard.

@chimpankie1954 5 месяцев назад

@@Soldknight324 Yeah I like the video summary too. I understand why, but man it kills me when you read a load of the resources and then you've got to go read the exhaustive MDN reference page that goes over EVERYTHING.

@vigilancebrandon3888 3 месяца назад

👋

@thiagobarbieri7476 3 месяца назад

@@chimpankie1954True, that is the worst part tbh. I really like when they type the examples in the TOP directly and don't link to MDN articles. The introduction to HTML and CSS were great, but the beginning of JS and the intermediary HTML/CSS are a PAIN. It's reading after reading and no exercises/projects in between

@jesseliverless9811 Год назад

I wish good luck to my fellow The Odin Project students, we need to hang in there!

@moiseslopez1929 29 дней назад

I'm going through TOP too. Have you reached your goals yet how is the progress.

@ga7853 6 лет назад

Kevin, Thank you so much for taking the time to build this beautiful tutorial, its been really appreciated.

@KevinPowell 6 лет назад

No problem Gamal, glad you liked it :)

@johnnyholiday1150 3 года назад

You deliver and explain the concepts so well, great personality and chilled dude, Thank you so much for these videos!!

@matthiasgustavpan Год назад

I love your content and the way you present it is just wonderful. Clear, concise, lucid, always with smart use cases in mind, perfectly paced, and on top of that you have a warm, soothing voice. I think everyone wishes they could have their favorite audiobook read to them by you. Chapeau!

@porobertdev 7 месяцев назад

Couldn't say it better! 👍

@creeksidecollaborative2830 2 года назад

Been struggling to understand this, and you made it SO SIMPLE. Thank you!

@TinyMaths 2 года назад

Just came across this in the Freecode curriculum; was confusing the hell out of me. You've made it so clear. Thank you!

@creeksidecollaborative2830 2 года назад

Ha! Freecode is exactly how I ended up at this video. I love Freecode, but that lesson made NO sense.

@cs_devel 5 лет назад

You can use CSS variables to switch colors during runtime as by themes. You only need one css file with the variables and link it first before all other css files and the variables are available inside the other css files. So you can switch to another theme by switching to another css file with new color definitions for the same variables.

@lloydthomas4481 5 лет назад

I haven't tried using variables yet. This will be next on my todo's . Thank you for the simple explanation .

@adamgriffiths96 6 лет назад

Great tutorials for beginners to web development like me. Thank you!

@KevinPowell 6 лет назад

Thanks Adam, glad they're of help 👍

@codingwalnuthindi6984 4 года назад

@@KevinPowell Your style of teaching is very helpful.

@MrAndi1281 3 года назад

the tutorial is great but the background white is a bit too hard on the eyes in my opinion!

@sovereignlivingsoul Год назад

excellent video once again, i like how you bring the quirks into your descriptions, i just started designing a new site, so i am going back to your videos to help structure things early to reduce any editing i may need to do later.

@catherineflores7106 2 года назад

Old, but still good to help brush up on variables. Thanks for all the great content!

@Aliante4 Год назад

Very helpful!!! Showing multiple examples and ways it can go wrong helps me out a lot

@disenoydesarrollowebpregal1902 Год назад

Siempre tan claro y simple! Tus videos son lo más!

@ga7853 5 лет назад

I can not believe that I did not see your CSS VARIABLES tutorial until just yesterday, it's very helpful and you did cover it beautifully, Thank a million.. We owe you man.

@KevinPowell 5 лет назад

Glad it helped (and that you found it :D)!

@shankerm3959 5 лет назад

Today I realised I knew too little abt css. Very excited to discover new knowledge from your videos. Pls go on making videos. We developers need great tutors like you.

@KevinPowell 5 лет назад

So glad to have helped Shanker!

@RameenFallschirmjager 4 года назад

Your great tutorial to make a portfolio brought me here! You are very insightful, I learnt a lot from you.

@sparky-makes8373 Год назад

Hello from TOP! Thank you for all the top notch content!

@Jack-un5im 8 месяцев назад

The start of this video is like when Neo is first in the matrix

@dreyaknowles101 5 лет назад

Great video, really informative and super helpful. Keep up the good work and please keep making videos!

@a2ulthakur 2 года назад

Thank you so much .. i absolutely loved this and it helped me to learn something new. I love the way you have explained everything. Please keep up the good work and i am following all your tutorials.

@SephOrtha 3 года назад

man i like your videos dude, great articulation of concepts and comfortable presentations.. its always a pleasure learning something from you.

@KevinPowell 3 года назад

Glad you enjoy my approach!

@bill4824 11 месяцев назад

I have learned so much, Kevin. Thank you so much!!!

@abeldrecke2819 6 лет назад

Hi Kevin Great video, wish a lot of others were as clear and concise as you Very much appreciated

@KevinPowell 6 лет назад

Thanks a lot for the kind words Abel!

@venkateshanap3271 4 года назад

I love this tutorial. Thank you for suggesting me to learn this when I ask queries in instagram. Thank you sir😊

@ulysse8182 5 лет назад

Thank you for your tutorieal, very clear and quick enough :)

@clevermissfox 9 месяцев назад

You’re a great teacher, run into a lot of videos that are produced beautifully but the narrator or creator is not concise or clearly explaining. Thank you for sharing your time and knowledge!

@westfield90 5 лет назад

I really learnt a lot from this video. Thank you

@Kaizen01395 Год назад

Thanks for sharing this video! I love your site a lot and your teaching style. Super helpful!

@dfjama 5 лет назад

Great series and helpful, thanks man

@HostDotPromo 5 лет назад

Thanks Kevin. Gonna start using this on small projects. Glad CSS is innovating and becoming futuristic! Sick of compiling simple stuff lol! Cheers. 😀

@PaulNieman Год назад

Wow it makes such sense! Thank you Kevin.

@nasirhusain6957 6 лет назад

Great Videos on variables in CSS. I really enjoyed the way that you taught. Would love to more Thanks again man. Kevin Powell

@KevinPowell 6 лет назад

Thanks for the kind words Nasir, and glad you liked these :)

@RRehanashraf 2 месяца назад

The Odin project brings me here. Your videos are great. keep up the good work.

@lawrencekeeney4317 6 лет назад

Great video. I have been waiting for a good video on CSS variables.

@KevinPowell 6 лет назад

Glad you liked it Lawrence! I've got 5 more coming out over the next two weeks that take a much deeper look at them too :D. I wanted to have part two out today, but I'm sick at the moment and was in bed really early, so I didn't have time to edit anything. Hopefully it'll be up tomorrow instead.

@DaggoeNinja Год назад

Great tutorial, i didnt understand it but with your tutorial i do. Thx Kevin.

@RS-nz6rn 3 года назад

Now I can use css variable comfortably for my 1st project. Thanks.

@yasiralnakhli7315 3 года назад

how is it only 1.7K likes to the video where the viewers more than 40K when the illustration is so simple like that? thank you so much, MR. Kevin Powell, I loved CSS cause of you

@sylvesterpromise3300 Год назад

You just got a new subscriber ❤️

@seemsas 6 лет назад

very nice. Thanks. I didn't know css provides this functionality.

@KevinPowell 6 лет назад

It's still technically part of a working draft, but the browsers have all started to implement it, so that means we can start using it :D. The idea has been around for years, but it's only recently that browser support has reached a point where it's worth it, and we still have to watch out for IE :(. But I have a few videos that will take a look at dealing with older browsers.

@alljapankaratedo 5 лет назад

Great video, very well put.

@KevinPowell 5 лет назад

Thanks! Glad you liked it.

@adriennewarden8440 5 лет назад

Mr. Powell, I am loving this channel man...Thank you. I'm self taught and doing my best to increase my knowledge. The thing I love the most about your channel and tutorials is that you are so in love with what you do. It's a feeling I get every time I create a page, form, etc. Thanks again. You are a true treasure. P.S.: I'm considering taking you up on the Sass course. Limited budget, but I know it will be worth every penny and more. Do you have a course on JavaScript?...JavaScript has me so confused.

@KevinPowell 5 лет назад

That's because JavaScript is confusing 😂. I don't have one, but I know a really good one (it's closed now, and expensive, but it's really good, learnjavascript.today but it's written, not video).

@adriennewarden8440 5 лет назад

Thanks for the resource...I'll check it out...Enjoy this wonderful day.

@adriennewarden8440 5 лет назад

P.S.: There's no mention of cost on the learnjavascript.today site. How much does the course cost?

@KevinPowell 5 лет назад

I don't know how much it'll cost the next time he opens it up... it was north of $300 last time though, which I know can make in unaccessible for some :(

@adriennewarden8440 5 лет назад

I'm going to put some pennies away for it...I've signed up for his newsletter. Thanks again.

@deyantopalov3697 Год назад

Hey, I just want to say that your content is amazing! Also you have a talent (or skill developed by hardworking) to explain in simple words,!!! The last one is important because some of the RU-vidrs are like a mix of 500 IQ person and Eminem.. I mean some videos out there are incredibly fast paced and explain with only advance terminology, and usually the user watching is feeling no smarter than a bag of chips.. I would also love to see a "2023 Updates" in each or most of the playlist covering the topic with a short recap of the things that have been added/changed in the programming language that are related to the playlist topic. This is just a suggestion of course, I hope I do not sound ungrateful.

@code.cracking Год назад

thanks for your efforts

@ajayji1009 4 года назад

You are always awesome Kewin. Just one thing, while overwriting the variables at several places, why to mention variable name, can't we just mention the color property there?

@Lymphater 8 месяцев назад

Thanx, Kevin.

@GR_BackingTracks Год назад

Doing this in Continuing Education FEWD class now... Excited to see some old-school KP! My biggest takeaway: local variables override global variables, in the same way that specificity overwrites general properties.

@alial-shaikhly873 4 года назад

Thank you very much for this information.... problem though... I use MS expression web 4 as it is free and it does not appear to recognise the var() for some reason. It does, however, recognise the :root{} part... Any idea why and how to rectify the problem? Many thanks

@unknownplayer0383 2 года назад

my corner of the internet is just a little bit more awesome ! thanks to this video

@MantraMantis Год назад

Thank you Kevin

@carpediem73 4 года назад

thanks, this was helpful

@viniciussouza6269 Год назад

Hey Kevin, I have a question. what is the difference between learning pure CSS and some library like react to build web app?

@aebek1413 2 года назад

thank you kevin

@hv6411 11 месяцев назад

Learning in 2023! TY🤩

@apeyiomotobi2219 28 дней назад

am here now in 2024 wow

@matthiasgustavpan Год назад

Would there be a way to change to what a variable is set globally, for instance if i hover over a certain element?

@ryaaan0751 2 года назад

Thank you!

@ritaravinsky8262 4 года назад

wow. that's cool. thank you

@AE-yr6mo 3 года назад

What do you think about using a selector other than :root ? Would it be useful to stop global clashes etc. compared to using the shadowdom for a more modular approach?

@KevinPowell 3 года назад

I wrote an article over on CSS Tricks about how useful locally scoped custom properties can be! css-tricks.com/breaking-css-custom-properties-out-of-root-might-be-a-good-idea/

@salv236 6 лет назад

great video thank you

@KevinPowell 6 лет назад

Glad you liked it :D

@johndus1193 Год назад

Why didn't Kevin summon the secondary color(green) after defining it around minute 9:42 like he'd done earlier in the lesson?

@nickygello9105 3 года назад

thank you sir

@eepersian 5 лет назад

thank you very much

@dailymeow3283 2 года назад

Hey Kevin, can i add animation to :root in css, like i put keyframs for a root variable

@KevinPowell 2 года назад

keyframes themselves, no... you can do some interesting thing with them within keyframes though, like this article looks at: css-tricks.com/using-custom-properties-to-wrangle-variations-in-keyframe-animations/ - not sure if that's what you're after though.

@alanmccall4335 Год назад

Thank you for sharing I do feel a little more confident with variables on my journey to being a coder however, I wish you showed more examples with this such as how to import across the site for example if I used it from one sheet to another for example using a "@mixin" I'm able to import many styles at once but to use it in one sheet where it isn't coded I can import it with a "@use" and then I have to type the an "@include sheetname.mixinname;" just still not clear on how to implement it effectively across my sheets

@KevinPowell Год назад

In this video I'm looking at CSS variables, which aren't the same as Sass/SCSS variables, which you are talking about. No name spacing or importing these. If you did have a partial scss file that had custom props in it, you wouldn't need to @use it everywhere, just make sure it's brought into your main file. I do have in-depth videos on Sass variables with @use and @forward as well

@Colstonewall 6 лет назад

Now this is what I'm talking about! No need for pre-processors etc, etc. It's about time Native CSS did this.

@KevinPowell 6 лет назад

Totally agree! It looks like, based on the CSS working drafts, there might be a lot more preprocessor stuff moving to CSS eventually as well. This is perhaps one of the best things they could bring in though. Variables are on of the reasons I had started using Sass in the first place.

@nyoing 2 года назад

HELP! I cannot FTLOM get CSS variables for FONT-WEIGHT to work. Other font properties DO work using custom properties. Firefox Dev inspector tells me "Best Match". When I hard-code the font weight in the selector, it works. When I encountered this with a site in development, I launched VS Code (thank you, Kevin, for convincing me to use that) and created a simple, tiny test file. Still no love. IS THERE SOMETHING I'M MISSING?

@philip9677 5 лет назад

hi does this mean we dont use sass anymore? also what is postcss, ive heard the term being used a lot

@KevinPowell 5 лет назад

I still use Sass, as it does a lot more than just variables. PostCSS is something that will modify your CSS afterwards, things like auto-prefixer and a lot more postcss.org/

@studstud5498 5 лет назад

can I use css variables with @import and @font-face

@mateuszb4387 6 лет назад

do you use some tools for color palletes, or is it just skill and experience? Your colors are always top-notch. It is not that easy, espescially classy, sublte gradients are difficult for me and I don't know were to find them (besides your tuts :-)

@KevinPowell 6 лет назад

For color pallets, sometimes I just do it on my own, other times I use coolors.co, at least as a starting point. I come from a design background, so I've got some experience with picking colors 😀. An awesome resource for gradients is uigradients.com

@pauliebelohlavy6141 6 лет назад

Is there a need to learn sass or less now? Great video as always!

@KevinPowell 6 лет назад

Sass (and Less) do a lot more than just variables! But this is a huge step forward for CSS.

@VideoNOLA Год назад

Can you string Variables together in a row like this? --red: 1; --green: 2; --blue: 5; background-color: rgb(#var(--red--green--blue));

@KevinPowell Год назад

you'd have to do rgb(var(--red) var(--green) var(--blue));

@IBITZEE 3 года назад

Hi "Keven welcome to my channel"... nice to meet you! ;-)

@KevinPowell 3 года назад

😊

@user-sq3rd3gj2i 6 лет назад

Super!

@KevinPowell 6 лет назад

Thanks!

@cnt369 Год назад

I learned something.

@BGdev305 4 месяца назад

What's confusing is pause at @10:48 For .intro you have --secondary-clr: green.. but you don't say color: so how does CSS automatically know you mean font color.. what if you meant for it to be border color?

@thenumbersw 2 года назад

nice

@jazzhippie3878 2 года назад

You need more views. and subscribers honestly. Might just get a promotion because of you

@chrism7067 2 года назад

This tought me a lot, you should doa small update. Now when writing code you can do "color: --" and it will drop down all your variables you have so you can quickly choose and it will auto type and fill the var() value. You probably know this though Kevin but for anyone who doesnt there you go.

@shinauri1 4 месяца назад

On your channel, I first press like in advance, knowing 100 percent that this like will not be given in vain.

@ayoubdoc6166 6 лет назад

nice i didn't know that we can write like that in CSS

@KevinPowell 6 лет назад

It's been around for a long time, but browser support is finally getting there. So useful!

@ayoubdoc6166 6 лет назад

yeah thanks Kevin

@chromosundrift 2 года назад

weird, in your video that "red" isn't red compared to the rest of my computer! It's less saturated, closer towards a burnt orange.

@ashwithchandra2622 2 года назад

but what is the difference between *{} and :root{}

@hcgreier6037 Год назад

I took your exact code from Codepen into VS Code, but my page makes no columns, but stacking Whats going on here? 😵‍💫

@KG-ck9hb 5 лет назад

Realistically. how often are css variables used in a job environment perspective.

@KevinPowell 5 лет назад

Hard for me to say, but probably not a ton at the moment. Would be very dependent on that company, but as browser support increases (it's at 87%!) I could see them used more and more.

@Ari-lv8nc 4 месяца назад

We can override the values of the variables just like JS, nice.

@erikpersson9182 5 лет назад

Whats the benefits of using variables instead of classes?

@KevinPowell 5 лет назад

Two very different things. These are used for the values of properties.

@sreekumarmenon 4 года назад

what happens in IE 11 that does not support css variables?

@KevinPowell 4 года назад

Post CSS can help with that 👍

@komkwam 4 года назад

Or use fallbacks.

@sreekumarmenon 4 года назад

@@komkwam Isn't fallbacks code duplication , like you repeat the same line of code with a fallback hard-code value?

@texxs01 3 года назад

Granted, I don't get out much but I have never heard CSS Variables called "CSS custom properties" nor have I even seen in print until now. I googled it though and other do refer to them this way. I guess I need to get out more, damn covid...

@ahmedqwbad2802 Год назад

I got it.

@blackdeckbox 4 года назад

Do you use css variables or scss variables now? So you still use scss but exclude $variables

@KevinPowell 4 года назад

I don't use scss variables anymore except in very specific situations where I need them for loops and stuff I might be throwing together.

@blackdeckbox 4 года назад

@@KevinPowell Do you put all your variables in :root? I have a lot of variables like $color1Primary, $color2Secondary, $theme2Color1Primary, $smPadding, $xsPadding, $mdPadding, $lgPadding, $xlPadding, $smMargin, etc. It seems like it is just a global property full of these variables...

@trappedcat3615 6 лет назад

discovered recently you can dynamically update pseudo content with css variables using a string in a string in js: `' ${anyValue} '`

@KevinPowell 6 лет назад

Never even thought of doing that, I'll have to play around with that :).

@trappedcat3615 6 лет назад

Kevin Powell yah, its great for dynamic animation data -- charts, games, data oriented components, etc... Essentially any styled content that need not be selected or read by screen readers.

@CyberAbyss007 6 лет назад

Right off you start talking about SAS / SASS with no background? I search and found several mentions of SAS or SASS. Hard to tell if you are talking about syntactically awesome stylesheets or Statistical Analysis Systems. Would be nice if you had elaborated on a term. That can really mess up learning new topics.

@KevinPowell 6 лет назад

Apologies for that Rick, I had assumed that if someone were looking into CSS variables that they'd been using CSS for long enough to, at the very least, be aware of Sass. We all know what happens when we make assumptions though... It was an oversight on my part, I'll add some context to the description of the video, since I can't actually make changes to the video itself at this point. Thanks for pointing it out.

@CyberAbyss007 6 лет назад

I was a developer for years then dropped out and became a systems engineer then recently jumped back and missed a lot of developments in between. I'm catching up now. Thanks for the videos!

@CyberAbyss007 6 лет назад

Also, sorry as I re-read my original comment. It sounds a little jerky. You were awfully kind in your reply. A credit to you. I know it takes a lot of work to produce quality content. My apologies. :-)

@KevinPowell 6 лет назад

No worries at all Rick. As much as it's great for the ego when people tell me how much they like my videos, feedback that points out mistakes that I make are much more valuable. And as far as "jerky", by RU-vid comment section standards, it was pretty high up on the politeness scale, lol.

@ianiferrerlantigua8256 6 лет назад

hello.kevin, css variables are awosome. im a new in that.its.kinda confusing at the begin. I wondering how to declare the function hsl color in a variable? btw in the class .intro you declare the property text-align: center; i.think.it.is.a.mistake. have a good holiday

@KevinPowell 6 лет назад

For hsl, I would just declare the entire thing inside the variable, --hlscolor: HLS(x,y,z); and then use that var anywhere I needed it. As for the center align on the .intro, why was it a mistake?

@ianiferrerlantigua8256 6 лет назад

Thanks for.the.answer,...there.is.not.diferent.if.i.daclere.or.not.the.property.text-align.center..im.using.chrome.

@princejones0077 2 года назад

they should just get rid of the var() syntax and use one dash instead of two to simplify it...

@Darival92 6 лет назад

like your new haircut

@KevinPowell 6 лет назад

Thanks 😁

@chaoticneutral3487 4 года назад

Variables are cool. Unfortunately IE doesn't support this,... and like most other cool CSS techniques.

@jenstornell 2 года назад

I think your hair color has changed quite a lot the last 3 years.

@frosty1433 2 года назад

Why not just say html{} instead of :root{}?

@KevinPowell 2 года назад

It's become the standard, and because of that Chrome optimizes custom props that are declared on the root. Other browsers might as well, but I know that Chrome does for sure.

@frosty1433 2 года назад

@@KevinPowell I could see it playing nicer with IE11, if IE11 doesn't recognize :root, it could skip all the properties it wouldn't know what to do with. I guess it would be the path of least resistance, being mindful of browsers that don't support it.

@Padbangers 6 лет назад

Good introduction, but this seems very uncomfortable compared to scss

@KevinPowell 6 лет назад

Agreed, but because they are CSS properties, they aren't compiled at any point, which offers a lot of advantages over Sass variables, which we'll be seeing in videos 3 through 6 :).