CSS Variables - CSS vs Sass - variables inside media queries

all right so we know what a CSS variable is we've seen that working in action on something that's a little bit more concrete and now we're gonna see how we can use them inside of media queries to make our lives just so much better it's it's awesome so let's let's just go ahead and do that so if you watched the last video and you're already using sass you might be wondering what's the point of using custom variables I already have variables and they're a little bit shorter to write in sass or less or whatever preprocessor you might be using and at the very basic level they might look really similar but in reality they're quite different because sass is a preprocessor meaning that you tell it what a variable is and then when it makes your CSS file it just replaces all your little variables with what you want so in the end the CSS just looks like normal CSS with custom properties they're a little bit different they don't go away in a way like the sass ones do and they're not replaced by the actual value the browser actually shows it as the variable so here let's actually go look at this one really fast which will be coming back to in a second but if I come and I look at this if I look at my font size or my font family here or my font size they're not showing me what it is they're showing me the actual variable here so that's really cool and another thing that this becomes really nice with is you can play around with them using JavaScript which also for theming and stuff like that and amazing but we're gonna get to that in a different video one thing I want to show you is this the way we can redefine variables in different places that you can't do with sass and this might seem a little strange at first but we're going to come over back to this one a bit after and to explore it a bit more but one of the reasons one of the ways this can really work is in sass it can get a little verbose so I made this little example this is something that doesn't work and with sass so this is written using sass so this is a sass a variable and I'm saying my font size is 45 pixels and I want that font size to change to 100 when I'm past a size but as we can see here it's not actually working instead what I'd have to do to be able to make that work is all of this so I'd have to have a small font size variable and a large font size variable I have to select my h1 and say that my font size is the small one at small screens and it's the big one at big screens so now we can see it's working so if I'm below I'm in with it's using this font size and if it's above them in width it's using this font size and you can see that it changes so with the CSS variables that do work like this so this is really amazing and I know I'm getting an error here legal man for value for function and code pens has been giving them crazy errors the last couple of days I'm getting all sorts of weird stuff so I don't know what's happening with that um but we can see here I can declare what my font size is I can say that it normally it's 45 pixels if my screen size is bigger than a generic CIL's that has been changed and I only have to give my h1 the font size one time and now you can see that it's working doesn't seem like a big difference but if we expand this out to a big thing you can see it will actually make a big difference so if we look at the sass way of doing something we I did it with the regular CSS variables here I have font size body for large screens h1 for large screens h2 for large screens body for small h1 for small h2 for small so we can see that it's adjusting the screen as I go because I've said that my h1 h2 my body have these font sizes and then they get redefined at the larger screen sizes so that works it there's nothing wrong with doing it that way um but that's sort of the SAS way of having to do something and just to show you it's almost like a it's more than like my full screen here and the font size is quite big but it's there's a lot of code going in here just to change 3 font sizes we come and look at the CSS variable way of doing it it's so much more concise and easier to deal with and everything because I can keep all of my variables in one spot and I don't have to redefine anything as I go so if we look here I have my font size body h1 and h2 and then those change at a different screen size so I'm saying that when I get to this screen size I'm redefining these variables and then when they redefine that means I know have to include my h1 h2 and h3 in media queries anymore a lot of things don't have to be included in media queries because I can do it all with my custom variables including those in the media queries that makes my life so much easier so we can see now the font size is small the font size is big and it's just so concise I have all my font sizes everything grouped in one spot I have all I'll have like all my normal styles together I'll have all of the ones I need in my media query and then I don't need to redefine things as much throughout my site I'm just redefining variables and then everything else can just live on its own I don't have to worry about it as much I could be changing my line height so I could be changing container widths I could be doing all of that all in one place and it just makes my life a lot easier to work on that level and that doesn't mean that you can't use sass variables and CSS variables together and we are going to be looking a little bit why you might want to do something like that in another video well if you if you think you can use this from her cool let me know down below or you know if you don't see the usefulness yet of CSS variables also I'd love to have a discussion with you so leave a comment down below and let me know about it if you did like this video please hit the thumbs up if you haven't yet subscribed please consider subscribing and spend too many videos where I haven't mentioned it so just a big thank you to my patrons thank you so much for supporting me if you'd like to know how you can support this channel go and look in the description below find the little patreon link down there and click on it and you'll find out everything there is to know thanks once again for watching and until next time don't forget to make your corn in the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 14,312

Rating: 4.9907408 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, sass vs css variables, css vs sass variables, css variables and media queries, css variables media queries

Id: 19e7_3UmQrI

Length: 6min 4sec (364 seconds)

Published: Thu Dec 28 2017