Stop using @import with Sass | @use and @forward explained

way back in october of 2016 dart sass was announced and in march of 2018 dart sas 1.0.0 was released which also meant that ruby sass was no longer being supported i don't want to get into the reasons that they've made that change i have linked to the post they put explaining the switch in the description for those who are interested in that though but what this means is that sas has continued to evolve and a lot of people don't even know about it and all of the new things that you can do with it and the new ways you're supposed to be working whether this is because you're using an old extension in your editor or for any other reason i'm not too sure but in this video what i want to do is dive into one of the most important changes that they've made which is moving away from imports and instead focusing on use and forward news and forward are part of their new module system and it's not even really that new i guess but it's been around for a long time there's a lot of people who don't seem to know what's going on with it based on this recent poll that i did over on twitter so i really want to dive in and look at the changes they've made to it with you all right so here we are in vs code and one thing you'll notice is that i'm not going to be using the watch sas extension a lot of tutorials including some of my older ones use that one but it's based on the old version of sas and it's out of date now they use the forward the module system none of this works with it instead i'm going to open up my terminal and tell sas to watch my files i'm not going step by step on this one just because i do have another video that does take a look at that so there should be a card popping up in the corner right now or the link to it is in the description on how you can get started with it and that even goes into setting it up with parcel which is super easy to do and with that you're getting automatic browser refreshes as you're making changes as well all right so sas is watching for changes we're ready to rock and roll so what i'm going to do first is i'm actually going to go in let's actually have this compile some css for us and let's go and open my css folder but just split it off onto the side because i always like knowing things are actually working right and one of the easiest ways to do that with sas is just to have a file here or a file a variable here and then you know you change your variable and i can see that it worked so fantastic so the very first thing to know is for the most part instead of using your import you're going to be using use instead and a very nice example of this is my font size here we don't want this to live here because we don't want that in my main css file even i wouldn't have this here either but that's beside the point a little bit so i'm going to go to my fonts file and i'm going to paste it there and i'm going to i already got a compilation error but i'm going to hit save and if we go look here just at the basic structure that i have inside of my scss folder i have an abstract file or folder and inside my abstracts folder i have my colors and my fonts so this font's scss file here is inside of the abstracts folder now if you're used to the old import system you'd do an import you'd come in with your abstracts slash fonts and just like that everything would work fine right your import and it's working and everything is good and dandy except import is being deprecated and it's really not encouraged to be using that anymore so for the most part as i said 99 of the time you're going to take your import and you're actually going to switch that for a use so i'm going to change that to say use except well my import was actually working we can see it compiled it right here if i hit save now i get an error but kevin you just said that instead of using an import you should be using a use and why isn't it working and this is part of the new module system which is use and forward or a part of and what happens is when we use something it's being name spaced so that means it's actually taking the variables that i have in there and it's name spacing them so my font size here is inside of this fonts so at the beginning here i'm going to write fonts dot font size and hit save and now it compiles just like that and this is one of the very big changes they've made that can be a bit of a head scratcher at first when you can't figure out why something is working so everything becomes namespaced and the reason for this is is it prevents collisions between different variables if you have different variables with the same name it used to be that you could easily overwrite one by accident you can't do that anymore if you now could use the same variable name in six different files import them all or use them all and they would all still work on their own so they wouldn't clash anymore and they wouldn't be overwriting one another so that is why they've added this so that is why that works like that and just to look at that again i do have some colors so we can do it at use say abstracts colors and you don't actually have to write out the whole thing with the name spacing but we're going to see the the solution to that in a second so here color and that would be my colors dot and then i have a red in there so i can hit save and you can see that red has come in because if we go and look in colors red is red blue is blue nothing too fancy just like that so everything is compiling everything is working perfectly fine now one of the very big big differences with this over an import is you used to come in and use all you bring in and import all of your abstracts first so all your variables your mixins your functions anything like that you'd put at the top of your main scss file bring all of that in and then you would bring in all your components in your layout and your general and all the other stuff and the things that were actually compiling to css because by having this at the top it was making it globally available to everything else that came after it that's no longer the case so to show you what i mean there i'm going to come here and i have a cards set up so the here you used to be able to do let's just set up something simple in the cards so dot card i would do font size would be my font size color and in this case what we'll do is we'll go with my blue so it's different and if i hit save now nothing happens because i need to bring it in so at use and this time it's in my components folder components slash cards and now i'm getting an error because it doesn't know it's see here it's saying font size it doesn't know what font size is oh well you're saying kevin you probably should have name-scaped it you forgot to name scape things oh you're right i did but that's not going to fix it so fonts.that and then here would be colors dot gotta spell it properly there and if i hit save it's still not finding it and that's because what's happening here is this is no longer making it globally accessible to whatever comes afterward when we use use it's only accessible within that individual file so we can't bring in a whole bunch of abstracts at the beginning and then start bringing in everything else and expect it to work it it's not going to function that way so what we can do instead is we'd have to come into this uh my card here and because i want to use my variables here i'd have to come up and say at use and this is so my at use and then i would come in here and this is in my abstracts folder now i'm in my components so one thing with use is it's like the imports it's always a relative path so i want to go back a step go into abstracts and then choose my colors and i also want to do the same thing but i want to grab my fonts like that and now everything compiles perfectly fine interesting right kind of cool and just to you know normally you wouldn't have this here so i hit save so this also means you don't need to bring in your abstracts to your main css file or scss file the one that's bringing everything in you don't need to do that here because it's not going to serve a purpose if you're not actually writing any scss here or any sas you just need to bring in the different parts that you're bringing in so i bring in my card and this has the imports on it here now there's probably two things that you're thinking one is the writing fonts and colors this way every single time might get kind of annoying and the other one is having to import all of them every single time could be kind of annoying so let's look at a solution for both of those the first thing let's go to my colors here memory as c and my fonts i'm going to write as star we're going to look at the differences here so when we write as we can change the name space of it so it was colors because the colors was based on the folder's name by saying as c i've changed the name from colors to c so now actually if i hit save here everything's going to fall apart and what i want to do is i can change my colors to c dot blue because it's bringing in my colors as c so i've changed the name space there to just be a c and the other one we can do is a star and what the star is doing is it's actually taking away the name space completely so that means we can do it sort of the old way where you do it like this so i can hit save and now it all compiled and everything is working properly so using the as we can change the names of things like that but i'm sure you've been on projects where you have a whole bunch of ones right you have colors fonts here you might have mix-ins here you might have functions uh functions maybe you have breakpoints that you need for something else breakpoints you just have all these abstracts you don't want to be loading in every single time you need to like you know every component you have probably has a media query so then you're always bringing this in and they always use fonts and colors so you're always importing those every time and you're always using mix in so you know at one point it can get a little bit repetitive and you don't want to be having to import or use like 10 different things so there is a solution to that and that's in any folder whatsoever what you can do is you can come in and make a file called index.scss and this is also where the difference between a use and a forward comes in when we use something we're bringing it into that file to be used within that file when we use a forward it's to bring it into this file to send it back out so what we can do is let's go to my card here and actually just copy this uh copy that and go back to my index paste it in we don't need these anymore let me just do it like this so i want to be in my index but i don't want to use them in this file i want to bring them all together and then spit them out into a as a single singular thing pretty much so here i can switch this over to at forward forward and it doesn't like my first one because i spelt it wrong i forgot an r there we go um so now i'm taking them into the index file and then i'm going to spit them back out so let's go take a look at what that's doing um and how we can use this and remember this i'm doing it with two files but you could have your 10 different files listed in your index here and the advantage of doing it this way is now instead of bringing them all in separately i could just do this right here i don't even need to write index because it's named index or underscore index because it is a partial because it is called index though i just need to list the folder here and it's going to bring everything that it has in it and because it's using the forward it means suck them into this file and then spit them out so it collects and then it it you can export singularly it makes sense right and now what i'm going to do is i'm going to hit save and we're going to get an error that's okay but again it's be and the reason we have the error is because take a guess name spacing hope that's what you said so here we could write abstracts dot font size and then i could write the same thing here and now it's working again so even though they're in their own files here they're being sucked into my index and then spat out and because they're being spat out as one you know from this singular file i can import them all just by looking at that folder name because it's in the index file and then it's name scaping it to that folder name right there so that means it's coming in with the abstracts like that and yes you guessed it that means i could come in with an as a and that means i could rename this one here dot a and dot a and hit save and it's still working perfectly fine or i could take this and make it a star and then i could drop this off completely from the beginning and just bring it in just like that now i'm just going to let you know now this is the very very basics of use and forward replacing the old system of the import very very basics of it there's a lot more to it than this so even though it's the very very basics of it i think it's enough to get you started with it and then you can dive into the documentation for a bit more or if you want leave a comment down below and let me know that you'd like to look at some of the more advanced uh use features some of the native sas modules that now exist and all of that we can always look at those as well there is a lot more to the module system than what i've covered here but you can definitely get up and running with this and then explore more of it as you get used to using what we've explored in this video and that's one of my favorite things with sas it's super easy to learn little pieces of it and slowly add to your arsenal over time and if you've enjoyed this video and you want to learn more about sas i am working on relaunching my sas course to take into account all of the updates they have been making to sas with dart sass it's a complete re-record of my original course and if you're interested in getting updates on it as i make progress on it and being alerted about when it launches you can sign up for updates with the link down in the description below thank you so very much for watching a massive thank you to my patrons for their support each and every month with a special thanks to zach who is my enabler of awesome and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 81,518

Rating: 4.980226 out of 5

Keywords: Kevin Powell, tutorial, html, css, sass, scss, dart sass, sass import vs use, sass forward use, sass @forward, sass @use, sass for beginners, css sass, sass css, css sass tutorial, sass tutorial for beginners, css pre-processor, sass import, css variables, sass modules, how to use sass css, sass @import, scss @import

Id: CR-a8upNjJ0

Length: 13min 12sec (792 seconds)

Published: Tue Feb 23 2021