5 Sass features that make it better than vanilla CSS

css has come a really long way since i started creating websites but one thing it can't do is turn five lines of code into a full grid system just like this and let's hit save on this and see what it gives us and you can see there column one is a flex you know think of it almost like a width we're just setting a flex grow of zero flex shrink of zero and then the flex basis or if it was the width it would work just as well and it sets all of these up hi there my name is kevin and here at my channel i teach people how to make the web and how to make it look good while they're at it with weekly tips tricks and tutorials as much as i love where css is right now and seeing it mature as a language i still use sas for any project that i'm working on and in this video i'm gonna be diving into five things i love the most about it alrighty so i am here in vs code and one thing that's important is i am assuming you already know how to get sas up and running and that you're trying to get into it a little bit so i have linked if you don't know anything about it in the description and there should be a card right here right now showing uh that's linking on how just to get set up and started with sas if you have no idea you can get set up there and then come back but if you want to see what sas is about and why i like it start with this see if you think this is interesting and then you can check the link down below if you want to get started with it on how you can get it up and running on your computer so on this side is my scss files or my sas files and these will be compiled into css over here so for example let's say i want to style a card and i come in i have my card like this and then i say something like card and then i want i don't know a padding of 1 1m like that you can see it looks everything looks like normal css at this point about what we can do and this is where nesting comes in is you can nest things so i could say my card if i have a title on my card let's say so card title like this and i could say font size is 1.125 1.5 rem and hit save and it outputs this here so now it's my title that is inside of my card right there so it makes this compound selector because my title is nested inside right there so that's kind of cool you do see some people sometimes like say you have your nav and this is where it can be useful so say you have it might be your like a nav that has a class of primary nav on it or something um so maybe you have your nav and then you'll do is in here you have your ul and on your ul so here you do like a list style of none uh display flex let's say display flex and you're getting your nav ul like that now what some people will do is they'll come on this and they'll say li because my li is inside my ul and then on this they'll say like padding 0.25 m and then they have their links and their links in their html are in there so they come here and they say a and then color is black let's just say black like that and then you're getting these read like these compound selectors that are over the top that are not necessary and not needed so i would really recommend in these cases not nesting this much i'm just gonna push alt and down on my keyboard to move that down like that and then i'm gonna do the same thing with this move it down uh or move it up one more there and hit save and what this is a little bit of a like a safer way of doing it because they are all nested in my nav still but as you can see it's nav ul nav li nav a to me that makes a little bit more sense and is a little bit safer as an approach than having these like super nested things so with sas it is really important to know what's being output and not just blindly going ahead and if you're not sure do this where you have the two files next to one another and you're looking at the differences and looking at what's happening especially while you're learning it um now going back to this first example sometimes in the html if you're using like a bem naming convention in bem and um bem and sas play really well together because you won't have a card title like this your card title is usually something like this card title right and if you're doing something like that or even if it's just card title like this however you're deciding to name things you can take advantage of that with the ampersand selector so first what i'm going to do is just put an ampersand here and hit save and you can see it just says card again so whenever you nest in ampersand it's taking that selector again so just for fun here it's nav ul i'm actually input space and put the ampersand and you can see it's ul nav so it's like the backwards because it's saying ul and then nav over there um so you can get some weird selectors by doing this sometimes so i can say but you can do that so you're getting the one itself but where is that useful well then here i can do double underscore title and hit save and it's doing a card title here and you'll notice it's not even a compound selector in this case which is really cool and really handy it's just a you know a single class all on its own even though it's nested on this side of things and that's because there's no space here if i put a space then it's gonna you know output it with a space there but if you have it all stuck together and you don't need the dot at the beginning because this already has the dot for a class name on it so you can get card title i could come in and say and body and do you know i know color is red for some reason and then it's my card body and all those other things or as i said if you're not a fan of bam and you just want hyphens well you can do the same thing with just a hyphen and it works perfectly fine another time this could be useful is you have your button yeah you know your padding is i'm just gonna say 1m not very nice color is red background is pink display inline block and then sometimes what's nice with different things that you're doing is to add spacing to them in certain ways where you only want margins on some on all of them except the first one so you can actually use an and plus and on that and that would if i do an and plus and and then say a margin left of 1m just to have a number here it's my button plus a button so that means that any button that follows another button will get a margin left on it so for something like that if ever you need that type of thing you know just you're writing a little bit less code the one thing is i will caution against one thing with nesting is there are some people who really don't like it because if you're searching for class names amongst files so you open up the folder and then you're doing a control uh ctrl shift f and you're searching throughout the entire project and you're searching for card body or card title it doesn't show up because you just have an ampersand title here and you might have an ampersand title for 10 different elements or 10 different components on your page so it does make searchability a little bit harder and there's some people who don't like it some people don't even like this type of thing so a bit of a word of caution but i am a fan of nesting i think that if you use it responsibly it can just save you some code and i don't if you know sometimes things like this might be a little bit too abstract and a bit hard to tell what's going on uh but in but you know for things like this i i do personally like it but if you don't like that or if you are working on a big project with a huge team and this does make things harder to maintain you know there can be reasons not to use it it depends on the situation and on the project now there's one other thing with nesting that for me with sas i just i love it so much i love it so so so much and that is say on this card i want a media query where the padding increases at larger screen sizes normally then you'd have to come here do your app media and then set the whole thing up and then inside there select your card again no longer no longer so in here what i can say we're going to do my app media and here let's just say a min width of i don't know 45 m just to have a number in there and then i don't have to reselect something because i'm nested within my card so i'm going to say padding is now 2m and even though it's nested here it's outputting it the right way around here so i have my card open close card title open close body open close then my media query and then it's putting the card inside of there for me i know some people are very particular with how they like having their media queries they like having everything at the end and a bit more organized for me this makes it so much easier to find i like all the styling for my card in one place so having the media query with my card here makes a lot of sense there are also tools you can use in for post processing sas is a preprocessor there are post-processing tools they can actually take if you have a hundred different media or separate media queries that are all using the same break point and it combined them all for you after the fact so this is like before going to production so if you if you like that idea for productions you're eliminating repeated code but for your dev environment everything is in one place for me that is just so amazing so yeah i love this so so very much and speaking of media queries another thing that sas is really good with is mix-ins so what i'm going to do is i've already set these up ahead i'm just going to paste it in and here let's say i have break points and small medium and why don't we make a large one as well just so we can have more you know more than just two um so this is called a map this is a sass map it's a little bit like an array right where you're just listing off things um or nested array even and what i can do here large let's just say it's i don't know 9am or something like that so we have different breakpoints that we want to have for our project now to be able to use these there's a few different ways if you set this up with each one being its own variable an independent variable you could actually just reference it down here so if i had an in sas a variable is something that looks like this or it looks like breakpoints there so let's just start with this br small and br small is 45 ram so what i could do is i could actually just come here and write br small so you could have them all listed you can see it's still working and if i change this number here to 40 whoops 40 hit save 40 ram i should say or m whatever we want there we go and it's updating over here and you can see that whatever number i put here and you can imagine you have 100 different media queries all using the same breakpoint then you update here and all of them update at once that's it's wonderful it makes life so much easier and this is something you can't actually do with custom properties so that's already really nice you could just do breakpoint small breakpoint medium breakpoint large if you wanted to but one advantage of putting them in a map like this is we can create a special mix-in so a mix-in is something where you start by reading at mix-in and i'm going to say mq for media query and you don't have to do anything so you could just have mq like this and then i'll show you what this would do first so then in here i'm going to write my media query at media just like you normally would min with min width of i'm just going to put 100 pixels now so we can see that it's different than what we had so far and then here i'm just going to write um color is red just for fun something really silly here what this is saying is if i wanna if i use my media query anywhere it's gonna give me a media query min with 100 pixels and it's going to set a color of red so let's delete what i had here and hit save and it's gone and then what i could do is i could come right here and i could say at include mq just like that and hit save and now it's bringing in that media query for my card because it's nested inside of the card and it has the width of 100 and it's setting my color of red now i don't know why i would do that as i said this is a silly example this could be used for all sorts of different things this is just like a really abstract example that you wouldn't use but what you could do is now we could actually say that here is the size so if i write size here just do it you know we'll put size like that and then what i'm going to do is come here and write size and hit save and this all of a sudden becomes a little bit more robust because if i come here and i write something like uh let's try 400 pixels and hit save you can see it's 400 and then i do it again with 500 and it updates to 500 so i can control the size without writing a whole media query out i'm just writing mq except right now there's a limitation to what i'm doing the limitation being it's always just outputting color red i don't want it to do that i want to be able to change what it does every time i use it so for that we can just say at content so now what i do is this is actually doing nothing right now but what i can do is i can actually come inside there like this and now we can go back to what we had before where we had the padding of 2rem i think it was 2m but whatever 2m like that so i'm setting my size and i'm saying what i want my padding to be so 2m like that and then maybe here on my button we could use it again at include at include mq uh let's say we do it as uh this time instead of 500 pixels 1000 pixels and we say that this is the color changes to black color becomes black and then so in this one my media query is coming in it's doing the card to padding two here the color is changing to black so i can already see how you're writing less code you don't have to set up the media query each time but where it really becomes useful is if this size is actually able to reference what we have here with my breakpoints now this is a little bit weird it is using a built-in sas function and to be able to use it i actually have to come up to here and do a little thing here where it's going to be use sass uh map like that because we're accessing sas maps to be able to use like access and go into a map i need to put that um so what we're going to do here in my media query is right at the top we can say that my size is a map yet of break points i'm going to put key and i'm actually going to change this here to say key and then what i can do when i want to use it don't forget the semicolon at the end uh and then if i want to be able to use this what i do is i'm putting in a value here so this value is going into my map it's going to take this it's going to look for one of these so it's the break point so it's going into my map of breakpoints and then it's looking for a key is it looking for small medium or large and then it's going to take whatever this is and make that the size this is a little bit like you if you know javascript this probably looks a little bit familiar uh maybe not super familiar but it'll look a little bit familiar and so what i would do here now is i can write small and down here as well i'm going to write small and 40m and 40m just like that and if i update this one to say medium it updates to 65. or if let's go back to small so they're both set to my small break point and i can come up over to here and i can change this one to 35 m and hit save and both of them have updated to 35 m i love this so very much i find this super useful this is one of the mix-ins i use every single project i ever do just because it makes my life a little bit easier i don't have to remember individual numbers that i've been using throughout my entire site i don't have to write out the whole media query every time and because of nesting i can nest my media query inside of my element and keep more organized that way so for partials i'm going to go really fast on this one just because this is a different document now that i'm working on this is my personal site that i've been uh this is my personal site that i've been doing some work in and what i like about partials is being able to organize my css a lot more so instead of everything just being scattered everywhere you're seeing on what we were just working on there was bits and pieces everywhere it was abstract examples but everything was just sort of split up and all over the place but here what i can do is i can have something that is literally just to be setting up my color utilities i can have something else like each component can have its own file each uh if i go into my layouts each main part of my layout a section my section my header like different things here can have their own sections within here which just make my life a lot easier i know what i'm looking for i can stay a bit more organized with everything because one thing people always tell me is that they're having a lot of trouble staying organized with their css and files are all over the place well now i can have individual folders all these little files each little element or each component can have its own file makes it easier for me to find uh if i need to get to something command p typography and then i'm in my typography file and all my typography stuff is here i go actually i forgot i need something for one of my other layouts and i push command p and i need to work on my header so i can just jump on over to my header and all my header stuff is here so i can just jump around and do different things really easily i need to update my colors i just write colors here it goes over to my colors and i can make updates to my colors nice and easily and quickly and it just makes it so i can break everything apart and these are partial files you'll see there's an underscore in front of all of them which means they won't get compiled but then i can pull them all into one place and have them spit out at the end is one big file which would be one css file let's have lots of little files so it reduces the http request it's not like you have all these css files that need to be loaded in and it for me makes it a lot easier to be organized i'm not going to go any further into like setting them up and all of that because i have a video dedicated just to that so if you want to check that out there's a card popping up right now that dives into that all right one of my very favorite things with sas also there's things called functions within sas and they're part of the module system uh you can create your own functions when you want to get really advanced and that's also really cool the fact that you can make your own functions uh but there's a lot of built-in functions that do really amazing things we used one just before with my map get but another one and this is my favorite one is instead say you have a color uh that you're using a lot uh but you want it to be an rgb because you need it to be transparent and know if you have like black it's easy right rgba you just do a zero zero zero and then you choose your alpha values like point two hit save and you know you get your transparent black coming in what if you have a color that you're using like i don't know you have a hex code of a b four c four a for example and it's this brown color that you have and you need that to be transparent well then you have to go and find somewhere else to do it and get like a color picker play with the value find out what the rgb is that's kind of annoying right what you can actually do with sas is if you do an rgba well this is part of css this is actually now a sas function as well so i can actually put a hex code right here and then just put comma 0.1 hit save and it spits it out as an rgb and puts the transparency on there so you know do that and it works perfectly fine i could even come in here and use color values if i want i can put red and it does it for me you know purple whatever color you want purple you can even put any value you want you could do this with hsla as well and it would also work but you know you don't need to find a way to switch it to something else you can just use it whatever color you have whether it's a hex code when it's a hex code or color value and i just love that a b c hit save and it figures it out for me so wonderful they also have other things that you can do here so if i have a color and let's just say i have a red that needs to be lighter i can actually do a mix and you can mix two colors together um so i can say mix red comma blue and hit save and that's spitting out purple because it's mixing the two together or i can actually say then ten percent uh just like this and hit save and it's going to do there we go it's closer to blue because it's saying uh 10 red and then the rest is blue so 90 percent blue i could move that to 50 so it'd be purple and then i could move it to 70 percent it's going to start going more toward red now this might not be the most practical thing in the world but what you could actually do and i like doing this where you're mixing colors with white so you're pushing things more towards white or if you're doing it with a black you can be mixing it more with black to darken your colors they also do have a lighten and darken function but it's really easy to hit like pure black or pure white i prefer the mix one just for you know if you get to 100 white you know it's pure white but if you're at 90 white um or not your 10 would be 90 white then it's like almost white there's a little like touch of pink in there and then 20 30. so you can make like a nice scale like this if you need to to lighten or darken colors and again if you want to darken you just do it not with dark with black instead um and then say 50 and you know maroon and so forth and so on now they do have a new part of their color module which is called adjust which gives you actually control of a lot of the different stuff that is part of a color uh for me it's a little bit overwhelming i haven't got my mind around it yet but if you want to check it out just check their documentation and look up the color adjust has the ultimate control on your color just there's so many variables at play that i find it a little bit much a lot of the time for me the mix to white and black does what i need it to we're going to delete everything that we have here right now because i don't want it to clutter up what's going on and we're actually going to look at a file as this is going on because we're going to do that grid system that i just looked at and this is using loops and those loops that are just so amazing so uh what i'm gonna do here is i'm gonna do let's start with an at four and this is something i actually did in a video a long time ago using the regular sas syntax instead of the scss syntax if you don't know the difference you can check the card that's right there where i look at a difference between the two of them uh but for this one i'm gonna take what i did in that older video but i'm gonna step it up and add a media query to it because that was something i got asked a lot about um so what i'm gonna do is i'm to start with an at and if or not f4 4i and if you're used to javascript you might be familiar with stuff like this and we're going to do from 1 through 12. and we're going to step this up this isn't where this won't be the finished version of it but we're going to start here uh and then i'm gonna do dot call and now for this we need to use something called interpolation which if you're not uh used to it um if you don't know what that means it's we need like we're doing a loop here so we're gonna go through all right it's gonna make sense you'll see what it is and i'll explain why we have to interpolate here when we get there um so i won't do that and for that what i want to do is set a flex i'm going to set a 0 0 because i want a flex grow and if like shrink of 0 they're going to be set to a very specific size and growing and shrinking in this case we won't need them and what we'll do is then here in brackets i'm going to say 100 percent but i don't actually want it to be 100 i want it to be a very predefined size so we can do math in here so then what i'm going to do is divide by but in here we need something else we don't actually need all these parentheses i just find it makes it a little bit easier i'm going to do 12 divided by i dollar sign i and let's hit save on this and see what it gives us and you can see there column one is a flex you know think of it almost like a width we were setting a flex grow of zero flex shrink of zero and then the flex basis or if it was the width it would work just as well and it sets all of these up and what i've done is i've actually set up something here where we have a row with all of these columns that are there right now um actually one other thing to get this to work what i'm going to do is just say here that the dot row has a display of flex because obviously that's important for it and that we also have a flex wrap of wrap because that's for this is an important uh step there as well just in case you have too much it's not going to overflow at the side but it would wrap underneath and if we go and take a look at what that would generate for us and i have that running on my local host right here so i'm just going to bring that over and we can see what that's given us so a column of 12 right there is my 12 right there and actually let's let's put this on the side and we'll keep this over here and we can close this for now um just so we can see what this is outputting is giving us this column system here so if i switch one of these just to show you that it's actually working if i make so if i change this 12 to a 10 here and hit save you can see it is updating live and it's done a 10 there so all those percentages are making sure that it all works but we can step this up a little bit along the way because there's a few things here that i think could improve it so if we come and take a look here what we could do is instead of looping through 12 and then having divide by 12 different projects might need different grid systems right so what we could do is come in here and say that we have our we could create a variable so what we can do is create a variable here of columns and let's say i want 12 columns i would just do that and this is a sas variable i'm using custom properties much more than sas variables these days but for stuff like this it's perfect because then here we can come in with my columns and we can use the same thing right here columns divided by i everything will look exactly the same now this will break things a little bit but i could say that we do a system like an eight column system instead now those everything before eight or over eight like the 11 the 12 the 10 the nine are all broken you can see it is working for all these other ones along the way um but just because of how i've set things up you know the numbers aren't adding up properly to make a nice balanced grid system but let's just say down here where i have a six and a six i could change this to be a four and a four and they'll actually go next to one another um you know that would be a four a four there and a four there because it's a total of eight so they're finishing at the eight so hopefully that makes sense right there let's just undo those changes that i made and come back to here and we'll go back up to 12 just because that is a common system to be using what we can also do is this one here we can give that an offset class as well yeah so i could say a call offset and this is very similar to bootstrap right um so we need to interpolate this again and i'll explain all of this a little bit more detail in one second and then for the offset we just need to say that there's a margin left of 100 divided by and we just need the same thing that we had here actually all of this can just be pumped right into there and hit save and it's because this is the margin left we want it to be equal to the size the the actual like if it's a six if it's a column offset six it should be equal to whatever this size was anyway right uh it's not working because i forgot my dollar sign there so this whoops dollar sign i there we go and you can see it's offset it by six so if i come in here now i could offset this by one hit save and it's pushed it over by one unit on my scale i can make it a four hit save and it's offsetting it by four units uh because this one is a four so i should put four there so you can see it's offset this by four units etc so it all builds out quite nicely there so then what we could do is actually come in here with a media query actually to make this into a media query what i really want to do is come here and just say that all of my div so you can say this so any cl any div that has a class that starts with call hyphen so that would be 1 through 12 through 200 if you had all of those and you could say that the flex basis is 100 and just to make sure that they're all the full size flex basis of 100 so they'll be full size and then this could actually be wrapped in a media query and i'm going to do it the long way because i deleted my mix in but if you had your mix in still you could just use your mix in to do it and we'll just say a min width of say i don't know 960 pixels just to have a number in there and so if i come in here and i open up the responsive and i open up the responsive mode you can see there they're stacking they're all on top of each other and then when they get to that width oh we break and then all of a sudden we have our column system right there so a nice way you know this is just one type of loop that you could build it could be super useful for one of your projects if you're building something out that is a bit more custom and you could take this and reuse it and switch your column system here and have it used in multiple projects if it's something that would be interesting if it's something that you would need you could even come in here if you're willing to push things you could come in with two different systems one could add in um spacing on them or you can use it's flexbox we have the gap property now you want to take advantage of that browser support's not perfect yet but it is something that you could explore as well if you want some spacing or you could use padding there's different ways to approach that but this could get you started on creating your own grid system if you don't want to rely on other things that you were using previously as i said earlier in the video one of the things that people struggle with the most is getting their css organized and i just showed a quick example of partials in this video if you'd like to learn more about getting organized with partials check out this video that is right here or go check down below for links to some of my other sas content thanks so much for watching a huge thank you to zach for being my enabler of awesome and all my patrons for their generous support and until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 42,239

Rating: 4.9708681 out of 5

Keywords: Kevin Powell, tutorial, html, css, sass, scss, sass mixins, sass nesting, sass &, sass parent selector, sass partials, sass functions, sass import, sass use, sass tutorial, sass features

Id: g1kF45K-q7o

Length: 28min 29sec (1709 seconds)

Published: Tue Mar 16 2021