Is Sass still relevant?

Key Takeaways

with css evolving so fast with things like custom properties that are just absolutely amazing being part of it and other things like nesting on the way as well as other tools like post css gaining more and more popularity i often get asked if sas or scss is still relevant and still worth learning today and my answer is a resounding yes hello my friend and friends i'm so glad that you've come to join me for yet another video and if you're new here my name is kevin and here at my channel i hope you fall madly deeply in love with css and if i can't get you to fall in love with it i'm hoping to at least get you to be a little bit less frustrated by it and sas is one of those tools that i think once you have a good understanding of css it just enables us to work a little bit faster and smarter and can help take away that frustration a little bit but granted there are a lot of things that css can do so well today i understand why some people have moved away from sas but today i want to look at a couple of the reasons that i'm still using it on a regular basis all right so the first thing i want to look at is how we can generate utility classes using sas really really easily and quickly it's a little bit complex but we're going to sort of walk through the steps on this and so here i've already set up a little bit of a loop and it's going to look for size and size values that are inside of sizes what does all that mean well here i have a map called sizes and i have different sizes set up i'm multiplying them all by a base size and actually let's just we can take this abstracts out for now so i don't have any conflicts um and we'll have a base size here of one room and so we're just taking this number multiplying it through all of these and there we go um and that's giving me my different sizes but they're just in a map we're not doing anything with them yet so let's say we want to create a padding class based on all of these we're going to work on this and make it a little bit better but we can say padding and then let's just say padding and then the we'll say padding uh here we'll just say the padding is one is uh i was gonna say one ram but we should say size value size value and let's hit save on that and let's just see here we can see it's made a whole bunch of padding classes and you can see that the size has come through so it's saying for each one of these so eight times that's giving us eight different padding classes it's a little bit silly right now but we'll get it better but we have these eight padding classes that are all being generated there and then the padding is right there and then we have a size value here so each time it's going and grabbing the size value so it's doing the math here and then outputting the finished number now obviously we don't actually want it to just say padding every time we uh you know that doesn't really serve much of a purpose so we can actually um sort of make this a little bit better and there's two different ways i could do it i could actually just name these one two three four five six seven eight but another cool thing you can actually do in sas is get string values and manipulate them a little bit and that can be really useful for more advanced use cases it's not something that i would do on a regular basis but we're looking at sort of the cool things that sas can do and so let's look at how we could set this up so right here we're going to create a number um number variable and to generate the number i want to get this right here so we can slice the string and we do that with the string which is a module in sas so i'm here i'm importing that with a use so use sas string means i get these the string module and then i can use different string functions from there so what i want to do on here is slice the string so what string do i want to slice well here we're getting the size and the size value so this even maybe just to make it a bit more clear we'd say size number and that's going to be these so here we want to get the size number so that's these and the value again is the one on the right so here we want to slice the size number and in this case we're just going to slice and put a 6 here and we'll see how this works in a second or actually yeah we'll do that and we'll play with the number a little bit so you can actually understand what's happening and then we can use this and actually before we try and use this just to show you what it's actually doing another cool thing you can do in sas is debug and debug won't actually print any css so we won't see anything get printed out here but what i can do is debug number and i'm going to hit save and if it's not coming there where is it coming well i have sas running here and you can see it's debugged right there we have the one two three four five six seven eight and so it's grabbing the one two three four five six from there let's just try a slice four and see what that would give us instead and we should see if we scroll down there we go we get the last four digits from there so the slice is taking everything before that and cutting them off and you'll notice it is starting to count at one and not zero and that is just sort of more in line with how css works so i do think that makes sense to they made that decision so i want to start cut everything off before the sixth uh the sixth character so a slice six just gets me my number and so there we go we get back to just having the number but of course debugging isn't really useful in this case we actually want to use it somewhere and we can do that right here i'm gonna do a hyphen and then here we can't do this this would give me an error because using a variable here it just it goes so if ever you need to use a variable in sas and it is outside of being an actual value over here variables are meant to be used as values and if ever you need to use one somewhere else then we come in and all you have to do is come and wrap it like that and it's a little bit of interpolation and so if i hit save now padding one padding two padding three padding four and so forth and we can see all of that and of course that means you could also come and turn these into margin classes and just by coming here and doing a margin on those and then we get padding classes and margin classes with our values and then of course what this means is this size map here if i change this base size to like 8.75 for whatever reason it's going to update everything in one shot i could also come here and manipulate just my base sizes here and it's generating all those utility classes for me which is really handy and really quick so it does take a little bit of setup to create this but once you have it you have it forever in every single project you'll ever work on so it's not like you're recreating the wheel every time but you'll notice i am doing a little bit more stuff here i have a sides here that we can use and a little bit more so let's make this uh even better and to do that we will use a little bit of nesting and even here the padding number um what we're going to do is let's delete this margin one for a second we'll create the margin ones after and i'm gonna use a little bit of nesting just to save myself a few characters and so we're gonna take all of you and we're gonna chop it off and so we're just gonna have a padding class like that uh right like that and here then what i can use is the ampersand character and paste in what we had before and that should actually give us the exact same result so let's hit save and i might have no there it is okay i was worried i broke everything but there it is it's all working like before uh if you don't know about the ampersand it's just taking the padding and placing it here it's a parent selector so whatever the parrot the nested parent of it it's grabbing it placing it there nesting's also coming to css but this type of stuff isn't uh with the math and the looping through stuff and the reason i wanted to break that up and do it like this is what we can do and i have this on the side just to speed things up a little bit but i can come here and bring in another loop and you'll notice i have my sides here so i might inline my inline start inline end and if you wanted to this instead of inline could be like uh your left and your right if you don't know about logical properties i'll link to a video in the description down below but basically this is my padding left my padding right it's not exactly the same thing as those but it's we'll we'll call it that for now and what that means is here we're looping through all the numbers but that means we're also going to loop through all the different potential sides and so and i'm just using the same idea of interpolation with my number with my padding coming through but then i'm also setting it for specific sides so if i hit save on that and my padding one padding in line one padding inline start one and one and again this could be a padding left and a padding right and if i just update those left one right one and it's also updated them here automatically it just works same thing with the two the left the left you can change this back to uh inline start and this and this have changed at the same time so really really cool how it works in line and uh and then you can just take this whole thing that we just created and once again set it up for your margins so this here there there would all become my margin and now you have a whole bunch of spacing classes for padding and margin on all your individual sides it does create a lot of css we'd use post css with a purge css or something like that afterward once your project is done and going to development to strip away all these utility classes that we've created that you might not actually be using in your project and that's one thing also just before we get to the next cool thing that's has can do is a lot of people have transitioned from sas to post css for things like nesting and a few of the other things that they do use like importing files and stuff like that and if that's all you need that's fantastic and you don't need to be using sas then but if you do want this extra functionality it doesn't mean it's one or the other you can use sas and use post css together in one project and they actually work really well together because they can accomplish different things now the next thing i want to look at other than generating utility classes and you can do this not just for this you can i also use this for my font sizes and looping through font sizes and and other stuff like that so it's not only for that you can do it for all sorts of different things um i use it for my colors as well i loop through my colors to generate custom properties and then we're going to be looking at now is my color themes and how we can actually do color theming with sas and so you can see i actually set up some different themes here and to look at how this is going to work we're going to open it up in the browser as well so let me just pull this over what we're working on and we'll shrink this down we don't need to see the compiled css anymore so i have this this site here we get you know um it's looking all right we have a decent color scheme on it i think and that's using this light theme that's right here and so right away because it is using my light theme and again this is just sas maps um it looks a little bit different but it's not that complex but i can come in and i can you know change my colors here and make that really dark and then i could make this one go even darker i don't know play around with my colors hit save and you can see it just updates the entire color scheme uh which is fine and you know there's time and place for that you start a new project you bring in all your colors that you need here and then you can just play around and obviously this is a very minimal color scheme you'd probably have more colors than this but um it just shows you that it can be pretty powerful but just even here just being able to set up your base colors and then applying them all through a token system which i have set up here uh just enables us to really work quickly and easily on new projects when you get started basing it all on like a starter template where a lot of this is already in place but even better is if i come over and i go to my tokens all the way at the top here i have my active theme and so my active theme i can change this over to a dark theme and it's going to switch over to my dark theme which is going to here and it's looking at the dark theme that i have set up or i have a new theme that i set up which is completely different and so i can just come to my tokens say i want this to be my new theme and i can have it switch over to the new theme just like that or go back to the light theme so right away i think that's kind of cool that we can do that and this is like a token system that i've put together for this project and it might look kind of weird that i'm referring to other variables um and stuff like that but just first of all a really big shout out to mike apuruccio sorry if i mispronounced your name but peruvian idol over on twitch i'll link down to his twitch in the description um he really helped me sort of wrap my mind around this tokenization system that he uses um and he talks a lot about design systems and stuff like that on his twitch so definitely check him out if that interests you and yeah so it looks a little bit weird but by doing this and sort of breaking things apart a little bit uh it makes things a little bit easier for example you can see i have like these round corners on everything and we're going to come back to the colors in a second but if i come back down to here i have my my borders all set up or my buttons i should say you can see that my border radius is looking at this 100 which is just 100 viewport width to give me a pill shape but i could switch this and say i actually want that to be a three and you can see that's switched it or a one and my my default button has switched these don't apply in that world just because they're circle buttons so i have them set up a little bit differently um but obviously if i had lots of buttons one update it just flows through the whole site and i don't actually have to go and find like my button class i can come here and control most of the styling of my site directly through here so that could even be coming in and changing my font family heading to i don't have one in this case but if i said serif just so we can see it change and you can see uh anything that was set up with my font family heading is now switching over there my font size let's just switch this to a 700 for fun um and everything will get bigger and everything so like this is like my one place that controls a lot of what's actually going on um i could come here and change this to my let's just change this to green again so we can see it all change or actually it's only changing certain parts of it that are set for my default text color but you get the idea that we have this one thing that controls everything which includes which color theme is active but i'm also using loops as i said to actually generate custom properties for my colors and then i'm sort of pulling those custom properties back in here and this is to say that sometimes variables are very useful and sometimes custom properties are very useful and the nice thing with having both your variables and your custom properties is that the custom properties there they live they're always accessible they're just they're part of your finished css file all of this this isn't in my finished css file these are all things i can hook into and it's only if i actually use one of these does it make it into the final css and it's not this that does it's just the finished value that just gets inserted where i need it to so for some things i still use custom properties they're amazing but for this tokenization system i've done it with css and just using custom properties and it works really well so if you don't want to get into sas just for that you don't have to but it does lead you to having a lot of custom properties whereas this sort of hides that a little bit more behind the scenes so that depends if you if you'd mind that or not um but yeah by having everything as custom properties what that does enable is if i go to my custom properties let's open them up custom properties here you can see everything is being generated against with each loops and they're going through my active theme and here just to show if i switch that to my new theme it's going to use my new theme but i like having that active theme class set up there as it enables me to just make that one change in my tokens and like ideally this is where all the action's happening i'm setting everything up here and then the magic just happens after that and i don't have to worry about stuff too much outside of that file but then here if we look at this i am setting up so here's my font sizes being generated here's my colors being generated but because it is generating custom properties i can also take advantage and make a media query that if we prefer color scheme dark we're not going to use the active theme we can actually have it force the dark theme on us so i can hit save i have a dark mode enabled on my system so really easily i can have it default to a dark theme in those cases i'd probably want to add a toggle to the site so you know you're on your active theme but if somebody wants to switch to the dark mode they can or if they want to switch the light mode they can and that would also be really easy to do i wouldn't necessarily have it here but you could have your light mode and force the light mode same loop but just having this as your light beam do the same thing with a dark and then bring exactly what we see here nest it in there this gets placed on your body or your html when things get toggled or it could even be a you know data theme equals light or a data theme equals dark that's being placed on the html or the body and then that can you know be that extra layer that comes in on top of everything and that could be kind of cool as well and if this gets you a little bit interested and you'd like to learn more about sas or you'd like to dive deeper into this idea of tokenization and design systems and theming and other stuff like that i'm currently working on a course called beyondcss that's going to be diving into all of these things so if you'd like to know more there is a link in the description of this video and i've also looked in a little bit more detail on this and a few other things that i really like about sas if you'd like to check out that video it is right here and with that a really big thank you to jan johnny stewart and tim who are my supporters of awesome over on patreon as well as all my other patrons for their monthly support and of course until next time don't forget to make your own internet just a little bit more awesome