Sass @import is being replaced with @use and @forward
Sass @import is being replaced with @use and @forward
🔥 My course: Responsive Design for Beginners! https://coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/af…
This video explains the new @use and @forward rules in Sass that are replacing the old @import rule. I’ll show you how the old and new rules compare, and how to set up your Sass/SCSS files in your workflow.
If you want to see me build a real-world project using the new Sass rules, check out my current series: • Building a Light/Dark Dashboard, Part 2
0:00 - Intro
0:43 - ✨ Thank you to GitHub sponsors clint25104, ChideraObi, and Deta ✨
1:09 - Walkthrough of the demo project
1:58 - Looking at files with “old” way using @import
4:47 - Issues with @import and why @use and @forward were introduced
8:32 - Sass modules explained
10:11 - Updating the old Sass files with the new @use and @forward rules
16:03 - How the new rules fix the issues with @import
19:14 - Updating Gulp config for the new Sass syntax
Resources mentioned:
Sass Modules by Miriam Suzanne — https://www.oddbird.net/2019/10/02/sa…
Libsass is Deprecated — https://sass-lang.com/blog/libsass-is…
Support for @import will be dropped latest Oct 2022 — https://github.com/sass/sass/blob/mai…
____________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://marketplace.visualstudio.com/…
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: https://coder-coder.com/responsive/
🌟 Gulp for Beginners: https://coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard— get 10% off with code THECODERCODER — https://vissles.com/?ref=mu96kxst5w
💻 Other gear — https://www.amazon.com/shop/thecoderc…
📚 My Favorite Books — https://coder-coder.com/best-web-deve…
📺 My Favorite Courses — https://coder-coder.com/best-web-deve…
🔽 FOLLOW CODER CODER
Blog — https://coder-coder.com/
Twitter — https://twitter.com/thecodercoder
Instagram — https://www.instagram.com/thecodercoder
#sass #css #coding
Content
1.04 -> if you write your styles using Sass you've
probably used the import at-rule when loading your
5.36 -> Sass partials however import is getting deprecated
and support for it is going to be dropped sometime
10.64 -> within the next couple of years instead of import
the new version of Sass has two new rules use and
16.56 -> forward these rules are part of a change to
make Sass more flexible and powerful for the
21.52 -> time being you can still use import but it's
definitely a good time to learn this new syntax
26.4 -> so how do we use the new use and forward rules
in our Sass files unfortunately it's not just a
31.52 -> matter of finding and replacing all your imports
and calling it a day it can be kind of confusing
36.16 -> at first but in this video i'm going to show you
the differences between import and using forward
40.88 -> and show you exactly how to set up your Sass
files but first a big thank you to my github
46.08 -> sponsors specifically clint25104 and chidera
obi who've been sponsoring me since february
52.4 -> and also a thank you to deda who's a gold
level sponsor sponsors help me make this
56.96 -> free content for all of you wonderful people and
i appreciate it so much if you're interested in
61.68 -> being a sponsor check out my github page linked
down below alright let's get into the video
69.12 -> so in vs code i have this pretty barebones
website that we're going to be working with
73.44 -> in order to look at both the old and the new Sass
syntax so all of our Sass files are in the app dot
79.92 -> scss folder and currently these files are using
the old import rules i also have a lib folder
87.68 -> that has library.scss and this is meant to act
kind of like a third-party library that has styles
93.28 -> that we want to use along with our own custom
styles i've kept all the styles pretty simple
98.56 -> as you can see in order to focus more just on how
to load the Sass files and the differences between
103.44 -> the old and new ways and as usual i'm going to
use Gulp to compile the Sass to css so let's
110 -> run Gulp in the command line and it's going to
generate a final css file in the disk folder here
118.56 -> so let's take a look at our Sass files so we have
our main style.scss file and you can see that it
125.84 -> is importing a bunch of other files so the first
one is importing the library.scss file which we
131.84 -> looked at and we also have some Sass files from
a util folder so if we look in scss util you can
140 -> see that we have an underscore index.css file and
that is loading the other files in the util folder
146.4 -> border radius and breakpoints so all these styles
in util aren't actual style rules but rather they
152.8 -> are Sass objects for lack of a better word so we
have Sass maps loading our breakpoints data and
159.44 -> then we have this mix-in break point and another
mixing break point down then in border radius we
165.12 -> just have a variable called border radius and you
might have noticed that this does match what we
169.6 -> have in the library.scss file and those are named
the same for a reason and we'll get more into that
175.92 -> a little bit later in the video so let's go back
to our main style.scss file and i'm going to show
182.32 -> you each of these Sass styles and what actually
gets compiled in the final css file so first
188.8 -> let's comment out everything except this top
line loading the library so controls k control
196.32 -> c to comment that's the shortcut in bs code and
then we're going to save Gulp is re-running so
202.8 -> let's look at the css file so there's nothing in
this file except for these source maps up here
211.12 -> and the reason for that is because it's only
loading the library scss file and all this has
216.4 -> is that border radius Sass variable so this isn't
actually going to generate any css rules unless
222.96 -> it is used in another rule somewhere else in our
files so now let's go back to our main Sass file
230 -> and let's import the util folder and we can see
that Gulp we ran again and let's check out our
238.16 -> css file here so again it's blank nothing is in
there and that's again for the same reason because
245.84 -> util has border radius which just has a
variable and then it has breakpoints which are
250.32 -> the mixins and again none of these are generating
any actual style rules so let's uncomment that
257.44 -> last line to import the globals file so
now when we save Gulp is re-running let's
263.76 -> check out our style.css file and now there's
stuff here so these are all the styles from
270.16 -> in our globals we have boilerplate scss you can
see this is very close to the final css file
278.8 -> and it's also loading these css custom properties
or variables and that's coming from colors.scss
287.44 -> so this again is a very simple example of using
Sass and then compiling to css so you might be
293.04 -> asking yourself you know why do we have to replace
import if it seems like everything's working
297.76 -> however there are some issues that
come up when we're using the import
300.96 -> rules and they're kind of the reason why
Sass introduced the use and forward rules
306 -> so if you remember that border radius variable
that we had in the boilerplate scss file
312.64 -> up here it's setting the border radius to variable
of border radius so if we look in our final css
318.8 -> file and we find that style rule border radius is
set to 0.5rem so where did the 0.5rem come from
327.44 -> so if we go back to the files that had that border
radius variable we have library.scss and it has a
334.4 -> variable border radius and it's set to 0.75 ram
so that's different right then if we go to our
341.04 -> util folder we also have the border radius scss
file and that has border radius set to 0.5rem
348.8 -> which is what ended up happening here so why
did this happen we have two variables with the
353.6 -> exact same name the answer is if we go back to
our main style.scss file we first imported the
359.6 -> library file and that had 0.75 rems but then
we imported the util folder which is where
366.72 -> the border radius scss file lives so basically
what happened was it first loaded the library
372.96 -> set border radius to 0.75rem but then after that
it loaded our utils which has border radius set
380.24 -> to 0.5rem so you can see that the border
radius that we set in our own custom styles
386.72 -> basically overwrote what the library.scss file had
and that's why it's 0.5 rems in the final css file
395.6 -> and this is an issue obviously this is a very
simple example but this is an issue because let's
400.56 -> say we were using liver and we actually wanted to
use the 0.75 rems in our styles we didn't have an
407.44 -> error or anything come up when we compiled with
Gulp telling us that we have two variables of the
412.88 -> same name just kind of silently overrode the 0.75
from the library with the 0.5 from our own styles
420.16 -> so when you're working with Sass variables you do
need to be really careful to make sure everything
424.4 -> has a very unique name so aside from the duplicate
naming issue there is another issue i guess you
430.8 -> could say with the old import rules and that is
when you're loading you know variables mix-ins
436.4 -> or other Sass features you need to make sure that
they get loaded first in your main style.scss file
442.88 -> before any other styles that are using them so
for example we have all our mixins and variables
448.48 -> in util then we have our boilerplate and other
styles from the globals what happens if we move
456.16 -> globals to be loaded before the util file so let's
save that and see what happens so you can see
461.76 -> there's some issue down here in our terminal and
if we scroll up a little bit Gulp is telling us
467.52 -> there is an undefined mix-in for breakpoint medium
the reason this error is happening is because the
475.52 -> breakpoint in globals which is in our boilerplate
styles here is getting loaded before this mix-in
483.44 -> breakpoint is even created because it's
loaded in the breakpoints scss file
491.28 -> so that's another thing that you just need to
make sure that you're doing when you're working
495.12 -> with the old import rules in Sass and that is
to make sure we move all the actual style rules
502.96 -> that are using variables mix-ins to after they get
loaded so now yeah if we scroll down on a terminal
509.84 -> there's no error anymore and everything is fine so
because of these two issues and some other issues
515.04 -> this is kind of why Sass has this new approach
using styles with these new at rules used in ford
520.88 -> and this approach is called Sass modules so in
programming modules are a collection of code that
526.16 -> get imported and used by other code node modules
are one example of this because you can install
531.12 -> an npm package and then use that code in your
javascript this is actually what we've done in
535.68 -> our Gulp file so this is our Gulp file and up at
the top we're creating these new constants based
542.8 -> on npm packages that we installed like Gulp Gulp
Sass Gulp post css etc and then we can use the
549.52 -> code from these packages in our actual Gulp file
so with Sass modules basically each file can be
556.32 -> considered a module in and of itself and in some
ways it's not that different from what we've been
560.4 -> doing with import because you know we're importing
these multiple partial Sass files into our main
565.52 -> Sass file here but Sass modules introduce
some new features that are really helpful
570.16 -> and one of them is called name spacing so if you
want to read more about Sass modules and what this
574.8 -> new version of Sass is i highly recommend checking
out miriam suzanne she is a css expert who's also
580.96 -> part of the css working group which is kind of
like the elders of the internet and she has been
586.16 -> featured on css tricks the syntax fm podcast
various talks and her articles on Sass modules
592.4 -> helped me a lot when i was just trying to figure
out all this stuff because there was a little
596 -> bit of a learning curve so if you're interested
i've linked this article down below and i highly
601.6 -> recommend checking it out so let's go back into
our project and i'm going to close everything
609.2 -> 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
615.12 -> Sass is i'm going to just copy this folder and
make a new version and then i'm going to rename
622.48 -> the copy to Sass scss old just so we keep the
old import stuff and then in the sdss file
631.28 -> and then in the sess folder and then
in this scss folder i'm going to
636.72 -> use the new use and forward rules so probably
the biggest difference with Sass modules is
641.92 -> that we're not going to load all the Sass files
that contain variables mixins or functions in our
647.52 -> main scss file like we've done the entire time
so we're only going to load files that contain
653.44 -> actual style rules so that would be the globals
folder so i'm actually going to comment out
662.56 -> the library and then the util stuff and then
for the globals i'm going to replace that
670.64 -> with forward so when we're changing
the stuff let's also go into the global
676.4 -> subfolder and the index file here and we're going
to replace import with forward in the same way
685.6 -> so now let's rerun Gulp and oops looks
like there was an error here oh yeah this
693.28 -> is probably because of the mix-in thing yeah so
saying undefined mixin and that again is because
698.32 -> we remove the util from here so what i'm gonna
do for now is go into the boilerplate scss file
705.28 -> and i'm actually going to comment out the code
that's using the mixins and variables so ctrl k
710.8 -> control just ctrl k ctrl c comment out and i'll do
the same thing for down here let's re-save it and
721.12 -> re-run Gulp oops not what i want to do
re-run Gulp okay so now Gulp is running okay
728.88 -> let's check out our final dist folder and the
style.css file here and it looks like the styles
736.24 -> are getting rendered into style.css which is great
so you can see that the forward rule seems to be
744.88 -> very similar to the import rule right we're using
four globals and then in the global's index file
750.56 -> we're forwarding boilerplate and colors but what
do we do about the mix-ins and variables and the
755.84 -> other Sass stuff that we have in our util folder
so let's go into util and update that as well
762.32 -> so here's a util subfolder and in the index file
there we're going to update the import to forward
772.64 -> and this will make the index file in util load
breakpoint and border radius now let's go back
779.44 -> to the boilerplate scss file and uncomment the
code that we commented out earlier so again it's
786.56 -> throwing this error because it can't find the
mix-in so the way that we now load um mix-ins
791.76 -> and stuff is actually in each specific Sass file
that is using the mix nor the variable that we
797.36 -> 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
804.8 -> we're going to load the util folder so dot dot
go to utils and we don't want that ending slash
813.84 -> let's resave it now you might have noticed that
we saved and there's still the error it's still
819.76 -> can't find that mixin breakpoint and the reason
for this is because when we use the use rule
826.24 -> it is loading the util styles like we did before
with the import rule but it is automatically
830.96 -> giving it a namespace and that namespace by
default will match whatever the name of the folder
835.92 -> is so everything from the util folder is getting
loaded with a util namespace so what that means is
843.2 -> that when we're using the mix-in so for example
the breakpoint mix in here we can't just type
847.84 -> breakpoint we need to tell them that it's coming
from the util namespace so util dot breakpoint
853.68 -> and we do the same thing with the border radius
variable util dot border radius now let's save
860 -> and Gulp seems to be working let's check our final
css file looks like our styles are getting loaded
866.64 -> and it has converted the mixin breakpoint to a
media query and the border radius variable is
872.32 -> also getting converted to 0.5 rems so by default
it gives you that util namespace you can actually
879.36 -> create a custom namespace so let's say we don't
want to type out util every time we can say use
884.32 -> util as you and it can be anything i'm just saying
you and it gave an error because we need to update
892.56 -> the name space in all our styles to u dot now
we can save that and now it's working again now
901.36 -> there's another thing you can do with namespaces
and if you don't want to write any namespaces
905.12 -> at all you can say use util as a wildcard
and then we can get rid of the namespaces
916.8 -> and go back to how we wrote the variables and
mixins before scope is working so i wouldn't
922.24 -> really recommend using the wildcard because it
kind of defeats the purpose of having naming
926.32 -> spaces so that you can tell exactly where you
know this breakpoint mix in or this border radius
931.2 -> variable came from however you know let's say
you're migrating a really large code base that has
936.32 -> a ton of Sass files and using a lot of mexicans
and variables it might just be a huge hassle to
941.92 -> have to go in and find every single variable mixed
in and function and add that namespace to it so
948.24 -> i think that's the only use case that i can think
of that you know maybe the wildcard's a good idea
952.48 -> but in general i would you know i would
not do that i would stick with the util
960.88 -> add that name space in so going back to that
border radius issue where you know we were
966.8 -> loading library with these 0.75 rems and then
we were loading let me close these other files
975.68 -> we were loading the border
radius scss file with 0.5rem
981.52 -> library 0.75rem and if you remember the library
value was getting overwritten by the border radius
988.32 -> our border radius value now the namespacing
thing does fix that problem so let's say we
993.52 -> wanted to use the library value of border
radius we can add another use rule so use
1000.56 -> and then get out to the lib folder here and i
think i need to specifically say library.scss
1007.28 -> because it doesn't have an index.css file
so add that rule and then now we want to
1014.08 -> have border radius use library as a namespace
so okay everything compiled correctly there's
1021.6 -> no errors let's check out our final css file
and we can see now that the border radius is
1026.96 -> set to 0.5rem which is the value from the library
Sass file so this is one example of why the name
1034 -> spacing in Sass is really powerful because
we can load the util styles and the library
1040.4 -> styles and we can tell them which one we want
to use for our border radius variable so that's
1046.4 -> a really cool addition to Sass now and so i'm
pretty excited about this name spacing thing
1052.32 -> it makes sense you know almost more programmatic
i'm not going to get into that debate of if css is
1057.6 -> a programming language but it makes it more um a
little bit more like object-oriented programming
1063.04 -> so i did want to show you a couple really one
kind of weird thing that i noticed when i was
1067.84 -> experimenting with using ford so when i was
experimenting with the use in ford i noticed
1072 -> that they sometimes act almost identically so
if we go to our main Sass file here and instead
1077.68 -> of four globals we say use globals we'll save that
no errors that's good check out our style.css file
1085.04 -> everything looks pretty much the same as when we
use forward and that's i guess designed so the use
1092.56 -> and the forward rules will act exactly
the same if you're using them to load a
1098.64 -> file that doesn't have you know a variable
mix in etc so in some cases you could use
1104.32 -> use or forward either one and they'll do the
same thing but you definitely cannot use forward
1111.04 -> to load a mixer or a variable so if we go back to
boilerplate let's say we try using forward util
1119.2 -> and save that it's throwing an error because
use is the only rule that will allow you to
1124.24 -> you know access those mixes and variables
and stuff so just one kind of weird thing to
1129.36 -> keep in mind um this is kind of one reason
why i like to keep all my mixins and other
1134.32 -> Sass things separate in this util folder and
then in my other styles those are just style
1140.24 -> rules that may be using some of the stuff from
the utils but in general i would only use forward
1147.12 -> for you know loading styles and then i would only
use use when we want to use a mixer variable etc
1153.92 -> from another file so the last thing i wanted to do
is i wanted to show you how this new Sass syntax
1158.24 -> gets configured in gold because there is a slight
difference so let's go into our Gulp file let's
1164.64 -> close this other stuff up load the Gulp file
so previously Sass had multiple implementations
1171.92 -> which means that there is more than one way that
people were converting Sass to css so there was
1176.8 -> libSass there was node Sass which was based on
blib Sass and then there was dart Sass and each
1182.56 -> of those implementations had their own compiler
so in Gulp we have a package called Gulp Sass
1189.68 -> and that's what we use to compile Sass css
and previously Gulp Sass automatically came
1194.96 -> with the node Sass compiler however node
Sass and libSass have both been deprecated
1200.4 -> pretty recently and so it leaves only dart Sass
as the now the default implementation of Sass
1207.36 -> so because there were multiple implementations
before the newest version of Gulp Sass which is
1211.84 -> version 5 it actually requires you to explicitly
say which implementation you want to use
1218.64 -> so this is why if you're using Gulp size
version five you need to add this require
1223.28 -> Sass at the end of it instead of just require
Gulp Sass um let's actually delete that and
1229.28 -> just see what happens if we get rid of that so
we'll save that exit out of Gulp restart Gulp
1237.36 -> and it's saying here um yeah there we
go so Gulp Gulp satisfied does not have
1246.72 -> a default Sass compiler please set one
yourself both Sass which is dart Sass now
1251.2 -> and node Sass packages are permitted and then
it's telling you the syntax that you need to use
1255.68 -> so this is why we need to require Sass up
there so that was just a small thing that
1262.8 -> if you use Gulp you might need you might
run into this error when you're using it
1267.76 -> so i'm guessing that in the future Gulps test
might update to change to not have this required
1273.2 -> Sass thing because you know there's only one
implementation left now but for now we do need to
1277.68 -> add it in so that's a basic look at Sass modules
and how to use the new use and forward rules
1283.76 -> there are more advanced features of the new
Sass modules but i didn't cover them here i
1288.72 -> really just wanted to focus on you know how to
update your import rules to using use and forward
1293.92 -> so i hope this was helpful you know feel free to
ask any questions down in the comments and i'll
1297.6 -> do my best to answer them and again a huge
thank you to my github sponsors for making
1302.08 -> tutorials like this possible so thanks for
watching and i'll see you in the next one
Source: https://www.youtube.com/watch?v=dOnYNEXv9BM