Day 24: Sass Modules – @use and @forward

Today was surprisingly stressful. I wanted to reward myself for yesterday’s accomplishment so I thought I would do some CSS. Well, it actually was not a great relaxing reward but rather, I slightly forced myself to learn a new Sass syntax. I was not ready. lol

TLDR;

Okay, so here are the highlights of what I did:

  • I was able to figure out how to properly transition from using @import with Sass partials and modules to @use / @forward. I was only able to do this thanks to this fantastic video.
  • I started watching Lecture 4 from the MIT Missing Semester Course. I’m not rushing with this one just yet since I feel I earned a bit of an update on my blog since I got past the 21 day mark for blogging consistently.

Sass is Changing and I Need to Keep Up

I learned Sass a while ago but I read the docs recently and saw that it is changing. The @import rule is being replaced by the @use and @forward rules. The @import rule allowed users to import modules of Sass into other modules or partials into modules. Since this is changing I thought today would be a good time to change as well. Things did not go as smooth as I had hoped.

I won’t go into a lot of detail but watch the video I linked in the TLDR and you will understand the topic pretty clearly. I just got stuck for a bit with it. Although, now that I know how to use the recommended syntax I might be able to restructure my variable naming pattern since it is a lot less likely for me to deal with overwriting variables due to naming conflicts.

Conclusion

That’s all for today. If you are interested in the MIT course you can check out the video lecture I’m currently going through. The lecture is helpful but isn’t sufficient by itself. Anyways, until next time PEACE!