Sass @import is being replaced with @use and @forward

if you write your styles using Sass you've  probably used the import at-rule when loading your   Sass partials however import is getting deprecated  and support for it is going to be dropped sometime   within the next couple of years instead of import  the new version of Sass has two new rules use and   forward these rules are part of a change to  make Sass more flexible and powerful for the   time being you can still use import but it's  definitely a good time to learn this new syntax   so how do we use the new use and forward rules  in our Sass files unfortunately it's not just a   matter of finding and replacing all your imports  and calling it a day it can be kind of confusing   at first but in this video i'm going to show you  the differences between import and using forward   and show you exactly how to set up your Sass  files but first a big thank you to my github   sponsors specifically clint25104 and chidera  obi who've been sponsoring me since february   and also a thank you to deda who's a gold  level sponsor sponsors help me make this   free content for all of you wonderful people and  i appreciate it so much if you're interested in   being a sponsor check out my github page linked  down below alright let's get into the video so in vs code i have this pretty barebones  website that we're going to be working with   in order to look at both the old and the new Sass  syntax so all of our Sass files are in the app dot   scss folder and currently these files are using  the old import rules i also have a lib folder   that has library.scss and this is meant to act  kind of like a third-party library that has styles   that we want to use along with our own custom  styles i've kept all the styles pretty simple   as you can see in order to focus more just on how  to load the Sass files and the differences between   the old and new ways and as usual i'm going to  use Gulp to compile the Sass to css so let's   run Gulp in the command line and it's going to  generate a final css file in the disk folder here   so let's take a look at our Sass files so we have  our main style.scss file and you can see that it   is importing a bunch of other files so the first  one is importing the library.scss file which we   looked at and we also have some Sass files from  a util folder so if we look in scss util you can   see that we have an underscore index.css file and  that is loading the other files in the util folder   border radius and breakpoints so all these styles  in util aren't actual style rules but rather they   are Sass objects for lack of a better word so we  have Sass maps loading our breakpoints data and   then we have this mix-in break point and another  mixing break point down then in border radius we   just have a variable called border radius and you  might have noticed that this does match what we   have in the library.scss file and those are named  the same for a reason and we'll get more into that   a little bit later in the video so let's go back  to our main style.scss file and i'm going to show   you each of these Sass styles and what actually  gets compiled in the final css file so first   let's comment out everything except this top  line loading the library so controls k control   c to comment that's the shortcut in bs code and  then we're going to save Gulp is re-running so   let's look at the css file so there's nothing in  this file except for these source maps up here   and the reason for that is because it's only  loading the library scss file and all this has   is that border radius Sass variable so this isn't  actually going to generate any css rules unless   it is used in another rule somewhere else in our  files so now let's go back to our main Sass file   and let's import the util folder and we can see  that Gulp we ran again and let's check out our   css file here so again it's blank nothing is in  there and that's again for the same reason because   util has border radius which just has a  variable and then it has breakpoints which are   the mixins and again none of these are generating  any actual style rules so let's uncomment that   last line to import the globals file so  now when we save Gulp is re-running let's   check out our style.css file and now there's  stuff here so these are all the styles from   in our globals we have boilerplate scss you can  see this is very close to the final css file   and it's also loading these css custom properties  or variables and that's coming from colors.scss   so this again is a very simple example of using  Sass and then compiling to css so you might be   asking yourself you know why do we have to replace  import if it seems like everything's working   however there are some issues that  come up when we're using the import   rules and they're kind of the reason why  Sass introduced the use and forward rules   so if you remember that border radius variable  that we had in the boilerplate scss file   up here it's setting the border radius to variable  of border radius so if we look in our final css   file and we find that style rule border radius is  set to 0.5rem so where did the 0.5rem come from   so if we go back to the files that had that border  radius variable we have library.scss and it has a   variable border radius and it's set to 0.75 ram  so that's different right then if we go to our   util folder we also have the border radius scss  file and that has border radius set to 0.5rem   which is what ended up happening here so why  did this happen we have two variables with the   exact same name the answer is if we go back to  our main style.scss file we first imported the   library file and that had 0.75 rems but then  we imported the util folder which is where   the border radius scss file lives so basically  what happened was it first loaded the library   set border radius to 0.75rem but then after that  it loaded our utils which has border radius set   to 0.5rem so you can see that the border  radius that we set in our own custom styles   basically overwrote what the library.scss file had  and that's why it's 0.5 rems in the final css file   and this is an issue obviously this is a very  simple example but this is an issue because let's   say we were using liver and we actually wanted to  use the 0.75 rems in our styles we didn't have an   error or anything come up when we compiled with  Gulp telling us that we have two variables of the   same name just kind of silently overrode the 0.75  from the library with the 0.5 from our own styles   so when you're working with Sass variables you do  need to be really careful to make sure everything   has a very unique name so aside from the duplicate  naming issue there is another issue i guess you   could say with the old import rules and that is  when you're loading you know variables mix-ins   or other Sass features you need to make sure that  they get loaded first in your main style.scss file   before any other styles that are using them so  for example we have all our mixins and variables   in util then we have our boilerplate and other  styles from the globals what happens if we move   globals to be loaded before the util file so let's  save that and see what happens so you can see   there's some issue down here in our terminal and  if we scroll up a little bit Gulp is telling us   there is an undefined mix-in for breakpoint medium  the reason this error is happening is because the   breakpoint in globals which is in our boilerplate  styles here is getting loaded before this mix-in   breakpoint is even created because it's  loaded in the breakpoints scss file   so that's another thing that you just need to  make sure that you're doing when you're working   with the old import rules in Sass and that is  to make sure we move all the actual style rules   that are using variables mix-ins to after they get  loaded so now yeah if we scroll down on a terminal   there's no error anymore and everything is fine so  because of these two issues and some other issues   this is kind of why Sass has this new approach  using styles with these new at rules used in ford   and this approach is called Sass modules so in  programming modules are a collection of code that   get imported and used by other code node modules  are one example of this because you can install   an npm package and then use that code in your  javascript this is actually what we've done in   our Gulp file so this is our Gulp file and up at  the top we're creating these new constants based   on npm packages that we installed like Gulp Gulp  Sass Gulp post css etc and then we can use the   code from these packages in our actual Gulp file  so with Sass modules basically each file can be   considered a module in and of itself and in some  ways it's not that different from what we've been   doing with import because you know we're importing  these multiple partial Sass files into our main   Sass file here but Sass modules introduce  some new features that are really helpful   and one of them is called name spacing so if you  want to read more about Sass modules and what this   new version of Sass is i highly recommend checking  out miriam suzanne she is a css expert who's also   part of the css working group which is kind of  like the elders of the internet and she has been   featured on css tricks the syntax fm podcast  various talks and her articles on Sass modules   helped me a lot when i was just trying to figure  out all this stuff because there was a little   bit of a learning curve so if you're interested  i've linked this article down below and i highly   recommend checking it out so let's go back into  our project and i'm going to close everything   and i do need to exit out of Gulp for now so what  we're going to do to show you the new way of doing   Sass is i'm going to just copy this folder and  make a new version and then i'm going to rename   the copy to Sass scss old just so we keep the  old import stuff and then in the sdss file   and then in the sess folder and then  in this scss folder i'm going to   use the new use and forward rules so probably  the biggest difference with Sass modules is   that we're not going to load all the Sass files  that contain variables mixins or functions in our   main scss file like we've done the entire time  so we're only going to load files that contain   actual style rules so that would be the globals  folder so i'm actually going to comment out the library and then the util stuff and then  for the globals i'm going to replace that   with forward so when we're changing  the stuff let's also go into the global   subfolder and the index file here and we're going  to replace import with forward in the same way so now let's rerun Gulp and oops looks  like there was an error here oh yeah this   is probably because of the mix-in thing yeah so  saying undefined mixin and that again is because   we remove the util from here so what i'm gonna  do for now is go into the boilerplate scss file   and i'm actually going to comment out the code  that's using the mixins and variables so ctrl k   control just ctrl k ctrl c comment out and i'll do  the same thing for down here let's re-save it and   re-run Gulp oops not what i want to do  re-run Gulp okay so now Gulp is running okay   let's check out our final dist folder and the  style.css file here and it looks like the styles   are getting rendered into style.css which is great  so you can see that the forward rule seems to be   very similar to the import rule right we're using  four globals and then in the global's index file   we're forwarding boilerplate and colors but what  do we do about the mix-ins and variables and the   other Sass stuff that we have in our util folder  so let's go into util and update that as well   so here's a util subfolder and in the index file  there we're going to update the import to forward and this will make the index file in util load  breakpoint and border radius now let's go back   to the boilerplate scss file and uncomment the  code that we commented out earlier so again it's   throwing this error because it can't find the  mix-in so the way that we now load um mix-ins   and stuff is actually in each specific Sass file  that is using the mix nor the variable that we   want to load we're going to add a new rule up at  the very top so we're going to say use and here   we're going to load the util folder so dot dot  go to utils and we don't want that ending slash   let's resave it now you might have noticed that  we saved and there's still the error it's still   can't find that mixin breakpoint and the reason  for this is because when we use the use rule   it is loading the util styles like we did before  with the import rule but it is automatically   giving it a namespace and that namespace by  default will match whatever the name of the folder   is so everything from the util folder is getting  loaded with a util namespace so what that means is   that when we're using the mix-in so for example  the breakpoint mix in here we can't just type   breakpoint we need to tell them that it's coming  from the util namespace so util dot breakpoint   and we do the same thing with the border radius  variable util dot border radius now let's save   and Gulp seems to be working let's check our final  css file looks like our styles are getting loaded   and it has converted the mixin breakpoint to a  media query and the border radius variable is   also getting converted to 0.5 rems so by default  it gives you that util namespace you can actually   create a custom namespace so let's say we don't  want to type out util every time we can say use   util as you and it can be anything i'm just saying  you and it gave an error because we need to update   the name space in all our styles to u dot now  we can save that and now it's working again now   there's another thing you can do with namespaces  and if you don't want to write any namespaces   at all you can say use util as a wildcard  and then we can get rid of the namespaces and go back to how we wrote the variables and  mixins before scope is working so i wouldn't   really recommend using the wildcard because it  kind of defeats the purpose of having naming   spaces so that you can tell exactly where you  know this breakpoint mix in or this border radius   variable came from however you know let's say  you're migrating a really large code base that has   a ton of Sass files and using a lot of mexicans  and variables it might just be a huge hassle to   have to go in and find every single variable mixed  in and function and add that namespace to it so   i think that's the only use case that i can think  of that you know maybe the wildcard's a good idea   but in general i would you know i would  not do that i would stick with the util add that name space in so going back to that  border radius issue where you know we were   loading library with these 0.75 rems and then  we were loading let me close these other files   we were loading the border  radius scss file with 0.5rem   library 0.75rem and if you remember the library  value was getting overwritten by the border radius   our border radius value now the namespacing  thing does fix that problem so let's say we   wanted to use the library value of border  radius we can add another use rule so use   and then get out to the lib folder here and i  think i need to specifically say library.scss   because it doesn't have an index.css file  so add that rule and then now we want to   have border radius use library as a namespace  so okay everything compiled correctly there's   no errors let's check out our final css file  and we can see now that the border radius is   set to 0.5rem which is the value from the library  Sass file so this is one example of why the name   spacing in Sass is really powerful because  we can load the util styles and the library   styles and we can tell them which one we want  to use for our border radius variable so that's   a really cool addition to Sass now and so i'm  pretty excited about this name spacing thing   it makes sense you know almost more programmatic  i'm not going to get into that debate of if css is   a programming language but it makes it more um a  little bit more like object-oriented programming   so i did want to show you a couple really one  kind of weird thing that i noticed when i was   experimenting with using ford so when i was  experimenting with the use in ford i noticed   that they sometimes act almost identically so  if we go to our main Sass file here and instead   of four globals we say use globals we'll save that  no errors that's good check out our style.css file   everything looks pretty much the same as when we  use forward and that's i guess designed so the use   and the forward rules will act exactly  the same if you're using them to load a   file that doesn't have you know a variable  mix in etc so in some cases you could use   use or forward either one and they'll do the  same thing but you definitely cannot use forward   to load a mixer or a variable so if we go back to  boilerplate let's say we try using forward util   and save that it's throwing an error because  use is the only rule that will allow you to   you know access those mixes and variables  and stuff so just one kind of weird thing to   keep in mind um this is kind of one reason  why i like to keep all my mixins and other   Sass things separate in this util folder and  then in my other styles those are just style   rules that may be using some of the stuff from  the utils but in general i would only use forward   for you know loading styles and then i would only  use use when we want to use a mixer variable etc   from another file so the last thing i wanted to do  is i wanted to show you how this new Sass syntax   gets configured in gold because there is a slight  difference so let's go into our Gulp file let's   close this other stuff up load the Gulp file  so previously Sass had multiple implementations   which means that there is more than one way that  people were converting Sass to css so there was   libSass there was node Sass which was based on  blib Sass and then there was dart Sass and each   of those implementations had their own compiler  so in Gulp we have a package called Gulp Sass   and that's what we use to compile Sass css  and previously Gulp Sass automatically came   with the node Sass compiler however node  Sass and libSass have both been deprecated   pretty recently and so it leaves only dart Sass  as the now the default implementation of Sass   so because there were multiple implementations  before the newest version of Gulp Sass which is   version 5 it actually requires you to explicitly  say which implementation you want to use   so this is why if you're using Gulp size  version five you need to add this require   Sass at the end of it instead of just require  Gulp Sass um let's actually delete that and   just see what happens if we get rid of that so  we'll save that exit out of Gulp restart Gulp and it's saying here um yeah there we  go so Gulp Gulp satisfied does not have   a default Sass compiler please set one  yourself both Sass which is dart Sass now   and node Sass packages are permitted and then  it's telling you the syntax that you need to use   so this is why we need to require Sass up  there so that was just a small thing that   if you use Gulp you might need you might  run into this error when you're using it   so i'm guessing that in the future Gulps test  might update to change to not have this required   Sass thing because you know there's only one  implementation left now but for now we do need to   add it in so that's a basic look at Sass modules  and how to use the new use and forward rules   there are more advanced features of the new  Sass modules but i didn't cover them here i   really just wanted to focus on you know how to  update your import rules to using use and forward   so i hope this was helpful you know feel free to  ask any questions down in the comments and i'll   do my best to answer them and again a huge  thank you to my github sponsors for making   tutorials like this possible so thanks for  watching and i'll see you in the next one

Channel: Coder Coder

Views: 8,555

Rating: 4.9626865 out of 5

Keywords: sass, use, forward, web development, scss

Id: dOnYNEXv9BM

Length: 22min 1sec (1321 seconds)

Published: Mon Aug 23 2021