CSS Variables - Using them in the real world and a cool trick

so now you know how CSS variables work how you can write them let's go look at an example of them in action in a more realistic project okay guys welcome to this video we're gonna be looking at this pricing table I made I'm not gonna be coding out the whole pricing table if you want to see how I created this you can check out the code pen the link for it is down below instead I just want to be focusing on real the practical value of using it in your projects so the reason that this is super super useful is that by containing all of my variables here what happens is when I have a bigger file like this one it goes on and on and on and on and there's lots of stuff in here I have all of my different things set up that my variables let me keep all of the controls for my site in one spot so once i've actually styled my whole site now i can come in here and this one place has all the controls on pretty much what's going on so here where my font family is i want to change my font family and i could change it here as far as my naming conventions go FF is for font family if i had different ones i could have a font family primary and secondary or i could have just a font family serif and it saucer whatever you want fw c font weight so font-weight:normal font-style:normal e i'd have more than just three because i'd have then this can be body instead of paragraph but i'd have like font size one from h1 to from h2 which is this 3 from my h3 which in this case i'm using on my prices paragraph and you get the idea I think for that I have my colors set up so a primary color secondary I have a light and dark version of my secondary and accent I don't even think I'm using the secondary anywhere on here and that look at that I have a spacer one so my spacers what's controlling most of my space and I also have a medium and large space random and talk about this in a second and then I have my shadow that's used on my cards right now and B R stands for border radius so that's if I came in here and just change that to 25 it's gonna change the border it is here and on my buttons so you can see it's changing it on multiple things at once so it keeps my border radiuses nice and consistent throughout my whole site yeah so that's what the border radius is for so just to show you how this is controlling things here on my primary color if I were to come and change this to red you can see that it's affected most of my site so again I can control things really really well just through coming in here I want to change how my spacing works on my site I need a little bit more space of your one-point-five everything's gonna get a bit bigger because I'm also my spacers are being used in my padding so it's affecting and the spacing on things a little bit maybe that wasn't the best idea but it's also affecting these spaces you can see I also have a spacing medium and large and what I've done is I want my medium one to always be twice the size as my other one so I'm using the calc I'm putting in my variable spacer but I'm multiplying it by two and my large spacer is being multiplied by three so if I were to change this one that's controlling this space that we see here so if I were to shrink that down you can see that these spaces are getting smaller and if I do that all the way to one again it shrinks the whole thing down so that's controlling and that way by changing this one thing it's actually affecting all three of these at the same time which is really cool just really quickly one thing I did and I think I mentioned earlier that there is sometimes a useful case for overwriting your variables inside of selectors instead of having it up in the root so here I have my primary color which is this darkish blue color so if we look at how I wrote my CSS here and we come down to my cards my card title has the background of primary color so this is the title here it has that background color my card price is the primary color has that color and my button which is somewhere else also is using that color card button background is primary color so the advantage with this is when I change my primary color all of them are changing but then I have this this set here which is my sort of the one that I'm trying to highlight this is the package that I really want to sell right so if we look here in my markup we have my card then we have another card and then I have my third card so one two three but my second card this middle card is an important card of card important so this is the more important card and I wanted to change the colors in it now I don't want to have to go through and redefine all of my colors throughout the whole thing I don't want to have to say card important card title card important card price card important card body etc etc to change the colors so what this lets me do is if I come and I look I have my card important I've redefined what primary color is I've changed primary color to my accent color so that means I don't have to change anything one line of CSS changes it all so if I take this off it's going to go back and they're all gonna look the same now because these are all using the card and inside of my card my pricing all of those things are set up to be using a primary color and so primary colors working fine it's getting it from the route and if I come here and I redefine it here whoops just on do I redefine my primary color it's changing what it is in that one so this is also if I had three I could have card important and let's just say a card very important and we do card very important and on there I could say that that primary color is var secondary color which won't really be the best color to use don't I have a secondary whoops I forgot my period there we go and now it's changed that one so it's a nice easy way to change colors on a system is already existing and to come up with some themeing options and stuff like that so this is the one time where I'd be looking at actually using it and redefining variables I think in a case like this it actually makes sense to do it like that but do be careful with stuff like this but again you're just gonna be coming through and writing your CSS like you normally would there's nothing that's too fancy nothing that you want to change around too much but basically you're just going through and setting all the things up that you normally wouldn't but whenever there's anything that's repeating so my background color my colors are always gonna be repeating bring them up and make a variable your font sizes your spacing issues your rate border radiuses your shadows if you have gradients anything like that and then it gives you full control over the site in one big area right at the top of your style sheet which is just amazing and makes it really easy then to make modifications so there we go I hope you liked the video if you did please hit the thumbs up leave a comment down below to let me know if you have any questions please don't be shy leave a comment down below I love having discussions with you guys down there and if you haven't yet subscribed please consider subscribing so you can get videos like this every single week in the next video I'm gonna look at how CSS variables differ from SAS variables and that using them in media queries is just amazing it's literally a chain it can change the way you're working they're just amazing immediate where ease and don't forget until next time don't forget to make your corner of the internet just a little bit more awesome

Channel: Kevin Powell

Views: 18,410

Rating: 4.985878 out of 5

Keywords: Kevin Powell, tutorial, html, css, css variable, css variables, css custom properties, what are css variables, how to use css variables, using css variables

Id: V9yP0QG0NWI

Length: 8min 5sec (485 seconds)

Published: Wed Dec 27 2017