Freaking fantastic, I couldn't understand what on earth was going on after reading the official docs and a CSS tricks article, but you managed to explain it like I was 5 years old in 5 minutes. Would definitely take your Sass course after this to stay up to date, when registration opens...
Mr. Powell, simply magnificent !! Fantastic explanation !! People like you let us (beginners from not-so-developed economies/countries) move forward in life one step at a time. THANK YOU !!! May you prosper in life !!
Totally agree. It seems like just added boilerplate if one isn't suffering from namespace conflicts. Good explanation though, but my team will not see this as a net positive.
It reminds me of ES Modules in JS. I really like it, basically because I'm used to the namespacing and organizing files that go together around an index file and export all of their stuff. I think it makes a lot more sense than globally available variables. It's more verbose, but it's less stuff to keep in mind or guess about
I agree that is an overhead functionality, but you'll definitely find it very useful once u have like, more than 30 SASS files in ur project. You're no longer forced to bring all the files into the main SASS file that is compiled to the public CSS file.
@@somerandomchannel382 You'll have to start with this video: ua-cam.com/video/wYWf2m_yzBQ/v-deo.html, which explains how to get started with watching your SCSS.
Dunno If you are "the king of CSS", However, there is no way, there is no doubt, You are the best "CSS-SASS Instructor" outside there!!! Thank so much Kevin!!!!
Kevin, I just wanted to say thank you for all you do. You've really helped me as I learn design and development. I also really appreciate that you don't edit it out if you make a mistake. You fix it and move on. This helps me to not tear myself down if I make a mistake.
Been stuck doing backend for years now and jumping back into front end more prevelantly I realized I'm behind the curve again. Your channel has been invaluable for getting back up to speed on all the updates / changes to CSS/SASS etc... Thanks so much!
@@aninham I've been a WordPress developer for years and it is an easy one to pick up the backend for. Not near as lucritive as so many other backends. PHP has Laravel, python has django, JS has Node, and it goes on and on. Just dive in and build stuff. Best way to learn!
Finally understood. Impossible to explain it clearer and shorter 🤓 🚀 Thanks Kevin, you're extremely talented to teach whatever you bring into your videos!
Finally someone who explains the changes on Sass. I couldn't get it working on my own, knowing the changes, so I just stucked to the @import. Thank you for the video. Time to get used to a new work flow.
Just thank you, all make sense now, I was looking for a clear explanation and guess what, you are the only one to be clear about this topic ! Just perfect
My brother and I started learning and working with SASS just last night and he told me about how much he love the 'import' keyword. Your video came in at the perfect time and again shows why we must keep learning
Your content is simply incredible. I'm a front-end developer here in Brazil and I confess that watching your videos I don't even consider myself a front-end anymore (laughs). I still have a lot to learn. Waiting for more videos like this.
I didn't like it at first, it seemed like a lot of extra work. Then you explained the additional features and now I do like it, they actually thought about how to make it simpler without killing the benefits of namespacing.
Thank you for explaining how to use @forward! Since I'm learning react I found myself having to change to npm sass instead of node-sass. Finding out I had to convert to @use in the first half of the video was making me PISSED cause I don't want to keep typing over and over again for global things like variables and mixins. Thankfully you showed us @forward cause I was going to riot.
Awesome! Finally! I have been using Sass with @use and @forward as a self-taught developer for a while now, and wondered if I had been doing it right!? I am so glad you have done this video. If you could do a video on the "with" keyword, and perhaps how we should architect our projects when using sass like this. Awesome Kevin job. Keep it up!!!! The way sass has built this up. I think it opens Sass up for richer architectures and more extensible and robust use cases. Blocks of CSS kind of act like abstract classes now, we can extend them, hide variables, set up entire libraries of components from the macro to the atomic ... as much as we wish! I think this truly gives sass super powers! Awesome Video!
Kevin, thank you so much for continuing to keep us up to date on these types of things. I swear without you I would be left behind in the CSS world. I appreciate all that you do
Thanks for the explanation! You're the only who helped me understand it. But the downside of this system is that you can't use your functions withing mixins as if it would be in a single file i.e. _vars.scss. So I'd like to see more videos on sass file structure, how to organize your project sass files with this new modular system. Thanks a lot for understatnding!!!
At first you think "oh no, this is a lot to absorb..." and then you think "how could I have lived without this?!". Thanks for the gradual layering of information when it comes to a complex thing.
Hi Kavin, I'm also a Frontend UI/UX Developer and I enjoyed watching your videos. these are very helpful. Please make more videos on Advanced SCSS practices. Thanks
Nice clear video with no fluff, I'll now be swapping my projects over. I feel as though learnsass should put a link to this video in the @import warning on their website.
Great video! I read an article about @use last year and couldn't understand why I should make this switch but your video clarified it nicely. I'd also like to known(even if in brief) what else (or advanced stuff) can we do with @use and @forward. Thanks a lot for this video :)
Kevin, this is just what I needed. I'm coming up to speed with Sass and @use and @forward are some of the first things I needed to learn. Your explanations are very clear and understandable. Thank you for sharing your knowledge.
Hey, thank you soooo much. I am currently trying to get my dev team to move away from old sass to dart sass and have hit this exact issue. for now, I'll use this video to fix the problem and then start reading more on the @use and @forward.
Awesome, Thank you Kevin. It made me to think "why I was not looking about new things in Sass/SCSS" !!!. as many stuffs are rapidly changing in this technical world, need to grab those and get benefitted. looking forward for more videos related to SCSS from you :) Cheers.
Considering Ruby Sass has been around since 2006 (!), Node Sass since 2011 and Dart Sass 1.0 was released in 2018-I'd consider that to be quite a slow process compared to other software.
Dude I love your stuff. I have a long list of videos you make on my to watch list. Haha finally got back into front end after a year of be dev. I'm glad I got you 😊
Great quick intro to @use and @forward. Please do a more advanced video. I would also love to see your strategy for using media queries with SASS. In Vanilla CSS, I used to create multiple stylesheets for each breakpoint. With SASS, my media queries are in my components files and I've found it can get muddled pretty quickly. Thanks for the great videos and keep up the awesome work.
Thanks so much for the great video! When I first learned sass a few months ago I was reading the docs and noticed that @import was deprecated. I tried using @use but it wasn't working. And I thought it was me being a new dev and all! Guess not...it was Live Sass Compiler! Haha! Guess I'll trust my instincts next time...
Same here... Until now we used one file with variables and if we had to change the colour for one white label we just replaced that one file. I think we can still achieve the same thing with @use '' as * but it feels more complicated. Maybe if I get use to it I will change my mind but for now it looks a bit scary
The main use could be that you can use anyone else's stylesheets inside your own, without any name conflicts. You can have different teams for a site working on different parts of the stylesheet, and they will never have to worry that their variables will have a conflict in the stylesheet root. You're working on a component and want your variable to be called "borderColor", go right ahead. It doesn't have to be called notification_box_border_color. Then what if there's a v2 of the notification box? And both need to exist at the same time for a while? notification_box_border_color_v2? Yikes. This solves all that.
I don't think it's an approach rather than the way you'll need to conform to after @import has been deprecated. The big thing for me is that it avoids naming collisions.
This change is implemented because @import of sass is incompatible with, and going to conflict with, native @import rules. Namespacing is also important because css is now planning to implement its own native functions for color manipulation (and few mathematical operations) which are incompatible with sass. Namespacing will future proof the compiler.
Love you man....Thanks a lot for helping to get up to date....make us a helpful video with a very helpful sass nodules which can be more faster to code. Like some useful mixin some function. Thanks boss. Have a great time ❤
This is amazing, I love CSS, I always yes it with Sass to use nested styles, but I never had heard about @use and @foward, the way it works is very similar to others languages such as Python
Thanks for the vid Kevin. I love your content man. I really don't like these changes to SASS though! What happened to DRY?! ..and then if you do change the namespace, the code can get really messy and hard for other developers to follow without having to go and check. I feel like they've changed this just to be following some sort of software update flow, and just changed it to stay current. I'm sure there is some benefit somewhere, but asking people to change their whole workflow should come with huge benefit.. aaand make sense.
This is fantastic timing Kevin! I use the same boilerplate project file for my websites that I continually add to. As it has grown, it has a number of reused SASS files. All of which utilise the @import method. I think this is a good time for me to strip back my SASS files and restructure it is in the fashion. Thank you for this explanation! I look @forward to seeing more @use-s of this 😂
Hermano, entre a este video para solucionar un error, para ser sincero mi ingles es bajo y no entendi nada, pero me viendo me diste herramientas para pensar y buscar la solución hasta conseguir compilar mi código, gracias, tome su like!! :D
There is also a VS Code extension for the Dart Sass version called "DartJS Sass Compiler and Sass Watcher ". It runs automatically and recompiles every time you save your main sass file. It seems to not respond when only saving changes in "_partials" as far as I have used it.
Yes, please do an advanced video.
I'm Xavier, It's just amazing how easy to understand are things like this with your videos. Great Work!
Before I found this video, I was beginning to panic, unable to get @use and @forward to work for me. This was extremely helpful - thank you!!
Freaking fantastic, I couldn't understand what on earth was going on after reading the official docs and a CSS tricks article, but you managed to explain it like I was 5 years old in 5 minutes. Would definitely take your Sass course after this to stay up to date, when registration opens...
I agree. SCSS docs are pretty bad as far as explaining things.
Mr. Powell, simply magnificent !! Fantastic explanation !! People like you let us (beginners from not-so-developed economies/countries) move forward in life one step at a time. THANK YOU !!! May you prosper in life !!
I don't know it sounds like a pain in the butt to me. Although, I do understand why some people find it important.
yeah it only becomes an overhead for most cases
Totally agree. It seems like just added boilerplate if one isn't suffering from namespace conflicts. Good explanation though, but my team will not see this as a net positive.
Well the complications start when using a 3rd party or open source, surely you remove the issue of overnaming, but the import is just an overhead...
It reminds me of ES Modules in JS. I really like it, basically because I'm used to the namespacing and organizing files that go together around an index file and export all of their stuff. I think it makes a lot more sense than globally available variables. It's more verbose, but it's less stuff to keep in mind or guess about
I agree that is an overhead functionality, but you'll definitely find it very useful once u have like, more than 30 SASS files in ur project. You're no longer forced to bring all the files into the main SASS file that is compiled to the public CSS file.
Great explanation!
Thanks :D
This needs to be included in your weekly round ups. 😁
Um how do you compile your css file when typing in the scss file? :)
@@somerandomchannel382 You'll have to start with this video: ua-cam.com/video/wYWf2m_yzBQ/v-deo.html, which explains how to get started with watching your SCSS.
Brilliant explanation. Miles better than the official Sass documentation. Grateful and subbed.
Dunno If you are "the king of CSS", However, there is no way, there is no doubt, You are the best "CSS-SASS Instructor" outside there!!! Thank so much Kevin!!!!
Kevin, I just wanted to say thank you for all you do. You've really helped me as I learn design and development. I also really appreciate that you don't edit it out if you make a mistake. You fix it and move on. This helps me to not tear myself down if I make a mistake.
Please do more advanced tutorials about @forward and @use. You teaching style is very easy to follow and accessible!
Been stuck doing backend for years now and jumping back into front end more prevelantly I realized I'm behind the curve again. Your channel has been invaluable for getting back up to speed on all the updates / changes to CSS/SASS etc... Thanks so much!
yesss welcome again to frontend! Hope you're enjoying your ride! Im considering doing the other way around but no idea where to start
@@aninham I've been a WordPress developer for years and it is an easy one to pick up the backend for. Not near as lucritive as so many other backends. PHP has Laravel, python has django, JS has Node, and it goes on and on. Just dive in and build stuff. Best way to learn!
Finally understood. Impossible to explain it clearer and shorter 🤓 🚀 Thanks Kevin, you're extremely talented to teach whatever you bring into your videos!
Finally someone who explains the changes on Sass. I couldn't get it working on my own, knowing the changes, so I just stucked to the @import. Thank you for the video. Time to get used to a new work flow.
Thank you so much. I haven't coded for a while and was overwhelmed by those changes. But you explain it so well.
dear God! I just implement it on my project and it took me the half of the day! its not easy when you have multiple files.
thank you Kevin
Just thank you, all make sense now, I was looking for a clear explanation and guess what, you are the only one to be clear about this topic ! Just perfect
My brother and I started learning and working with SASS just last night and he told me about how much he love the 'import' keyword.
Your video came in at the perfect time and again shows why we must keep learning
Your content is simply incredible.
I'm a front-end developer here in Brazil and I confess that watching your videos I don't even consider myself a front-end anymore (laughs). I still have a lot to learn.
Waiting for more videos like this.
I didn't like it at first, it seemed like a lot of extra work. Then you explained the additional features and now I do like it, they actually thought about how to make it simpler without killing the benefits of namespacing.
Oh my God, you have saved me from giving up. You are the best my friend, thankyou.
Man, I set the playback speed to 0.75 and your flow still sounds normal!
Btw great info, clearly explained. Thanks for the video
Thank you for explaining how to use @forward! Since I'm learning react I found myself having to change to npm sass instead of node-sass. Finding out I had to convert to @use in the first half of the video was making me PISSED cause I don't want to keep typing over and over again for global things like variables and mixins. Thankfully you showed us @forward cause I was going to riot.
Awesome! Finally! I have been using Sass with @use and @forward as a self-taught developer for a while now, and wondered if I had been doing it right!? I am so glad you have done this video. If you could do a video on the "with" keyword, and perhaps how we should architect our projects when using sass like this. Awesome Kevin job. Keep it up!!!!
The way sass has built this up. I think it opens Sass up for richer architectures and more extensible and robust use cases. Blocks of CSS kind of act like abstract classes now, we can extend them, hide variables, set up entire libraries of components from the macro to the atomic ... as much as we wish! I think this truly gives sass super powers! Awesome Video!
That was perfect! Minimal setup just to focus on the actual subject of the video. Wish I'd come across this video a few hours ago
Excellent explanation and I was really hopeless before I got this video, much thanks and appreciation
your voice and flow of detail is perfect!
Kevin, thank you so much for continuing to keep us up to date on these types of things. I swear without you I would be left behind in the CSS world. I appreciate all that you do
Thanks for the explanation! You're the only who helped me understand it. But the downside of this system is that you can't use your functions withing mixins as if it would be in a single file i.e. _vars.scss. So I'd like to see more videos on sass file structure, how to organize your project sass files with this new modular system. Thanks a lot for understatnding!!!
Looking forward for the complete scss series
At first you think "oh no, this is a lot to absorb..." and then you think "how could I have lived without this?!".
Thanks for the gradual layering of information when it comes to a complex thing.
Hi Kavin, I'm also a Frontend UI/UX Developer and I enjoyed watching your videos. these are very helpful. Please make more videos on Advanced SCSS practices.
Thanks
Nice clear video with no fluff, I'll now be swapping my projects over. I feel as though learnsass should put a link to this video in the @import warning on their website.
Great video! I read an article about @use last year and couldn't understand why I should make this switch but your video clarified it nicely. I'd also like to known(even if in brief) what else (or advanced stuff) can we do with @use and @forward.
Thanks a lot for this video :)
Have some things on the way on that :D
@@KevinPowell Great, looking forward to it :)
This video was fantastic, I stuggled with this and kept on wondering why I cannot use my syle sheets. I almost gave up thank you very much
Kevin, this is just what I needed. I'm coming up to speed with Sass and @use and @forward are some of the first things I needed to learn. Your explanations are very clear and understandable. Thank you for sharing your knowledge.
Great. You should make a full playlist on sass. Your explanation level is always top notch.
Thank you for the content. I am new to SCSS and some variables weren't compiling in my files. Now I know why. Thanks again!
Hey, thank you soooo much. I am currently trying to get my dev team to move away from old sass to dart sass and have hit this exact issue. for now, I'll use this video to fix the problem and then start reading more on the @use and @forward.
Awesome, Thank you Kevin.
It made me to think "why I was not looking about new things in Sass/SCSS" !!!.
as many stuffs are rapidly changing in this technical world, need to grab those and get benefitted.
looking forward for more videos related to SCSS from you :) Cheers.
Considering Ruby Sass has been around since 2006 (!), Node Sass since 2011 and Dart Sass 1.0 was released in 2018-I'd consider that to be quite a slow process compared to other software.
Stumbled many times on @forward, finally got the clarity.
Thanks. 🙏🏼
I just started learning sass and many thanks to youtube recommendations for recommending me this video :D Thank you as well Kevin
Been using SCSS since 214 but on an old project; interested in casually learning some of the new features that have been added over time, for sure.
Thank you very much...
Please give me more Sass techniques. You explain it so good. It's so clear now. Thank you again...
Definitely need the advanced use and forward video.
I’m very interested in this. Please make some in-depth videos on this stuff. Many thanks !!
thank you for being so clear !!!!!!! your teaching style is very easy to grasp
Dude I love your stuff. I have a long list of videos you make on my to watch list. Haha finally got back into front end after a year of be dev. I'm glad I got you 😊
Nice! This feels a lot closer to the import export workflow in javascript.
Yes, definitely! I'm surprised at the pushback people are giving, I was thinking the same thing and figured people would like that about it.
just started using sass recently and the ability to have all "imports" go to one file then only call that one file. love it!
Great explanation, please dive deeper into sass
I didnt even know that @import has been deprecated lol. Ty
Great quick intro to @use and @forward. Please do a more advanced video. I would also love to see your strategy for using media queries with SASS. In Vanilla CSS, I used to create multiple stylesheets for each breakpoint. With SASS, my media queries are in my components files and I've found it can get muddled pretty quickly. Thanks for the great videos and keep up the awesome work.
I'm getting into scss and all of that file organisation stuff.
And it is actually significantly improves what had.
Very cool thing.
wow !!!. Your explanation let me see a whole new approach
Hahah you had that typical classroom teacher face when you said. "Take a guess". That classroom student feeling came rushing to my brain hahah xD
Thanks so much for the great video! When I first learned sass a few months ago I was reading the docs and noticed that @import was deprecated. I tried using @use but it wasn't working. And I thought it was me being a new dev and all! Guess not...it was Live Sass Compiler! Haha! Guess I'll trust my instincts next time...
What a time to be learning Sass including me.
Thanku sir, you're a life saver.
I've used SASS since the very early days, around 2012 I think. I'm struggling to see the benefit in this approach.
Views
Same here... Until now we used one file with variables and if we had to change the colour for one white label we just replaced that one file. I think we can still achieve the same thing with @use '' as * but it feels more complicated. Maybe if I get use to it I will change my mind but for now it looks a bit scary
The main use could be that you can use anyone else's stylesheets inside your own, without any name conflicts.
You can have different teams for a site working on different parts of the stylesheet, and they will never have to worry that their variables will have a conflict in the stylesheet root.
You're working on a component and want your variable to be called "borderColor", go right ahead. It doesn't have to be called notification_box_border_color. Then what if there's a v2 of the notification box? And both need to exist at the same time for a while? notification_box_border_color_v2? Yikes.
This solves all that.
I don't think it's an approach rather than the way you'll need to conform to after @import has been deprecated. The big thing for me is that it avoids naming collisions.
This change is implemented because @import of sass is incompatible with, and going to conflict with, native @import rules. Namespacing is also important because css is now planning to implement its own native functions for color manipulation (and few mathematical operations) which are incompatible with sass. Namespacing will future proof the compiler.
We have to invest more into the setup, but for the usability we will get the return. Thanks for your great work!
Love you man....Thanks a lot for helping to get up to date....make us a helpful video with a very helpful sass nodules which can be more faster to code. Like some useful mixin some function. Thanks boss. Have a great time ❤
Awesome Explanation!
Please dive into advanced usage.
I was banging my head against the wall getting @forward to work. Cheers Kevin.
Duuuude, did you read my mind!? I was learning about all this new sass stuff yesterday and here you are!
Amazing clarity. Would be nice to delve deeper into the module system if possible, Kevin. Thank you.
great explanation of the new sass fundamentals, you have a new sub
Great explanation. Do more videos on showing new sass features
So that's why i can't use @use. I'm using the vscode extension. Thank you kevin!
Thanks very much for making this tutorial. my extensions were getting crashed each time when i was using import while the server running.
the king of css/sass
Thank you very much, Kevin! You help us all understand Sass and Css better. Make a video of what's new in Sass, please!
Tack!
Thank you very much for this easy to read explanation.
So nice! That was 13 minutes well spent! Good stuff, you got yourself a subscriber :-). Thanks!
So what about collisions in exported index? I was expecting something like `abstract.colors.red` not `abstract.red`
The whole purpose of the new module system is to prevent such collisions. In the old way it would mean a variable would be overwritten unknowingly.
@@JoepKockelkorn but now if we have the same variable in fonts and colors, what would happen when we forwarded them both into the index?
@@Kitulous I was about to ask the same, I don't know if there was a step missing or I don't get the whole concept.
@@CarlosMontalvoGhigliotty I'd like to know this too.
@@Kitulous namespacing them. He explained it well.
thanks Kevin, very well explained! How easy hard topics are when you tackle them and explain to us!
Thank you sir for the video, would love to see another sass video for the more advanced stuff. Thank you once again, you helped me understand a lot :)
This is amazing, I love CSS, I always yes it with Sass to use nested styles, but I never had heard about @use and @foward, the way it works is very similar to others languages such as Python
Thanks for the vid Kevin. I love your content man.
I really don't like these changes to SASS though!
What happened to DRY?!
..and then if you do change the namespace, the code can get really messy and hard for other developers to follow without having to go and check.
I feel like they've changed this just to be following some sort of software update flow, and just changed it to stay current.
I'm sure there is some benefit somewhere, but asking people to change their whole workflow should come with huge benefit.. aaand make sense.
Ohhh Jesus! you really save me. thanks for the clarity.
This is very knowledgeable video. Thanks Kevin!
This is fantastic timing Kevin! I use the same boilerplate project file for my websites that I continually add to. As it has grown, it has a number of reused SASS files. All of which utilise the @import method. I think this is a good time for me to strip back my SASS files and restructure it is in the fashion. Thank you for this explanation! I look @forward to seeing more @use-s of this 😂
Looking forward for the most advanced
Wow what a great video. Everyone talks about @use but no one ever mentions what or how to use @forward
Great explanation, yes please continue with more advanced topics.
definitely interested in more in-depth usage of @use and @forward - that would be awesome. more sass videos in general would be great :)
It works! Thank you so much (and for your other videos)!
Thank you for making this video. Was considering using sass again.
I would be happy to watch more advanced video!!! Please make it.
Thanks dude ,great explanation,i'm waiting for more advanced video.
Seems like an arduous solution to a problem that most SASS users have never experienced :/
what an explanation!!! super clear, thanks!!
Hermano, entre a este video para solucionar un error, para ser sincero mi ingles es bajo y no entendi nada, pero me viendo me diste herramientas para pensar y buscar la solución hasta conseguir compilar mi código, gracias, tome su like!! :D
This is actually good for code readability too and knowing where the variables come from as well. Not too shabby.
There is also a VS Code extension for the Dart Sass version called "DartJS Sass Compiler and Sass Watcher
". It runs automatically and recompiles every time you save your main sass file. It seems to not respond when only saving changes in "_partials" as far as I have used it.
Not responding to partials seems like a bit of a deal breaker :(
@@KevinPowell Also, I use auto save on my files so having to find and open the main file would be slower than just doing a build and a refresh.
I accidently wrote my own scss library after watching this tutorial
Awesome explanation, I would love to see a more in depth video/series of videos on Dart Sass :)
Muchas gracias!, Saludos desde Colombia. Justo estoy iniciando con Sass y estas clases me vienen muy bien.
Thank you for the news, greatly appreciated.
looking forward to your advanced course on Sass. What is the advantage of writing Sass
Okay, found you by accident, watched three videos and decided to sub, great explanations.