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

Рет қаралды 38,042

Күн бұрын

🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: 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 ...
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 -- www.oddbird.net/2019/10/02/sa...
Libsass is Deprecated -- sass-lang.com/blog/libsass-is...
Support for @import will be dropped latest Oct 2022 -- 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: marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: coder-coder.com/responsive/
🌟 Gulp for Beginners: coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- vissles.com/?ref=mu96kxst5w
💻 Other gear -- www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- coder-coder.com/best-web-deve...
📺 My Favorite Courses -- coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#sass #css #coding

Пікірлер: 105

@anoorhakim20 2 жыл бұрын

The thumbnail 😂❤️

@kamilc.5271 2 жыл бұрын

This video was so helpful. Finally got a good grasp of the new syntax. Thank you, Jessica! This is definitely one of my favorite youtube channels on web development!

@TheCoderCoder 2 жыл бұрын

Thanks so much!! I appreciate it and I'm glad my videos are helpful for you!

@ibrahimabubakarlincoln3815 2 жыл бұрын

@@TheCoderCoder very helpful Jessica

@fraserlock-macardy9633 2 жыл бұрын

Thank you for your time making this video. I have learnt a lot from it. Have a prosperous 2022.

@erenlothbrok4736 2 жыл бұрын

Please make a complete course on sass! It would help alot!

@BenDemeyere Жыл бұрын

I wasn’t aware of the changes here so was great to find this video!

@shonuff4323 8 ай бұрын

Thanks! I've been stubborn about using the new stuff. Figured it is time to start changing.

@hajimeippo804 2 жыл бұрын

I was going to learn sass today evening 😂😂 Now I will start to learn from afternoon for this video

@Knards 2 жыл бұрын

I just did a project with Use and Forward. I thought life was over when I decided to use it. But, once I used it, I discovered it wasn't so bad. Pain in the butt, but not so bad

@TheCoderCoder 2 жыл бұрын

Yeah it takes a while to get used to the new syntax! Definitely took me a few tries to get it

@zakhariihusar6975 2 жыл бұрын

Remember you as a person who's made a great webdev roadmap. Much love to your channel ❤️❤️❤️.

@financewithsom485 2 жыл бұрын

The content quality is the best I have even seen in a coding channel

@roctanweer2265 2 жыл бұрын

Although you taught me all about Sass but this time I've already learnt about these stuffs... Keep it up 🤗🤗

@TheCoderCoder 2 жыл бұрын

Awesome! and thank you!

@sayutalks9721 2 жыл бұрын

You are just awesome !! Subscribed

@progmell Жыл бұрын

Hey pretty, thank u so much, finally I could to learn how to use @use and @fordward.

@chr_aikicom Жыл бұрын

really love your style of teaching, everything seems so simple 😊 can you tell where you find your background music?

@ProgrammingwithShahan 2 жыл бұрын

Great video. I appreciate it

@bugoaneo Жыл бұрын

Let me hug you and thank you sincerely! I finally moved to the modules)))🥰🤗

@frontend3409 Жыл бұрын

Great explanation of @use! thank you! You have a gift (and my sub)!

@NabeerDarVlogs 2 жыл бұрын

Thanks, it was really helpful

@Manhleban Жыл бұрын

Great and informative tutorial! Can you please tell me what color theme you are using on your VSC?

@ouddriss 2 жыл бұрын

I really liked your video, it's really informative. Only thing that disturb me is the background music it's a little bit louder! Other than that is perfect ^^

@TheCoderCoder 2 жыл бұрын

Thanks for the feedback! we're going to be turning down the music for future videos

@kentmiggalen9756 2 жыл бұрын

14:08 thank you so much!

@Daddasoft 2 жыл бұрын

I love SASS thanks for give us more knowledge

@TheCoderCoder 2 жыл бұрын

Thanks for watching!

@ThePHPElephant 2 жыл бұрын

That was helpfull, Thanks.

@harrypujols886 2 жыл бұрын

Now it truly feels like Sass is no longer being maintained by Ruby developers, because they found a bloated, over-engineered solution for a problem that was easy to work around with.

@KletoReese Жыл бұрын

PRECISELY!!! Right now this way of using Sass is annoying and overwhelming taking the sheer fun out of development.

@shubhammusmade5744 2 жыл бұрын

Best youtube channel for front end development

@TheCoderCoder 2 жыл бұрын

Thanks so much 🙏🏼

@DenisovichDev 2 жыл бұрын

How is that every tutorial I need you post right away...

@TheCoderCoder 2 жыл бұрын

Hope this video is helpful for you!!

@renzvallinas3694 2 жыл бұрын

ctrl + / also works for comments

@thecodetex 2 жыл бұрын

This talk is going on a lot lately would be glad to see your explanation though I have already read an article about this in curiosity 😂

@TheCoderCoder 2 жыл бұрын

Hope this video helps explain it!

@thecodetex 2 жыл бұрын

@@TheCoderCoder Yea it did, cool video very detailed and we'll explained 😁👍

@stillready6405 2 жыл бұрын

Hey thank you for this video, this was just what I needed. One question regarding Gulp: Could I use for file minifying and bundling (sass, css, js) just Webpack or where and why should I use Gulp? I know Gulp is a task runner, where Webpack is a bundler, but I what I've seen Webpack can do already very much.

@RickyGarcia_Learning 2 жыл бұрын

you can replace gulp with webpack. it's preferred for many even.

@VinceM1000 2 жыл бұрын

I noticed you are using CSS Custom Properties in your Sass workflow. Do you have a video that walks through how to do this? I have been using Sass colour variables so far but have heard good things about Custom Properties but can't find much on how to implement them into a Sass Workflow.

@TheCoderCoder 2 жыл бұрын

I don't have a dedicated video for CSS custom properties yet, but I am using them in my dark/light toggle Frontend Mentor series! I set up the colors using custom properties so that I can change them via JS. You can see how I set it up in this video at minute 19 -- kzfaq.info/get/bejne/pK9gdcmJq9CtYX0.html Hope this helps for now!

@malaydesign 2 жыл бұрын

YOU ARE MY HERO (WEB HERO )

@kentmiggalen9756 2 жыл бұрын

Please more videos like this

@bandarkhawaji 2 жыл бұрын

Thumbnail is dope 👌😂

@TheCoderCoder 2 жыл бұрын

Thanks!

@mobilepassiveincome6637 2 жыл бұрын

I want to be just like you. 😊 But I still need to study allot when it comes to coding.

@rafalpotasz 2 жыл бұрын

Hi Jessica! Love your content and looking forward to see how you explain this shift in SASS, your channel has a ridiculously great production quality. I'm curious about something, more from a 'creator' angle, something I'm struggling with that is a roadblock of sorts. As a creator you know that others have content that talks about what you're about to talk about. But you make the decision to make it. I guess this is a question of what drives you, or rather how this knowledge of other-content that covers what you want to cover doesn't discourage you? Is it the fact that different people want different things? Or is it that you WANT to do something and the content being useful/informative/entertaining is a type of bonus? Than again, I already use @use and @forward, yet I want to watch this video to see what I've missed, or if you know something I don't yet. Perhaps I've answered my own question in part...

@TheCoderCoder 2 жыл бұрын

That's a great question! The way I see it, if you see videos on a topic you want to do, that's actually a good indicator that there is interest in that topic. And everyone explains things differently with their own style-- so some people will resonate with certain creators more than others. It's kinda like watching a TV show or movie-- people have different likes and dislikes. So even if someone has created a video on the same topic, you still can put your own unique spin on it. Hope this helps!

@rafalpotasz 2 жыл бұрын

@@TheCoderCoder That does indeed help, thanks for taking the time to respond - appreciate it 😁

@useruser-xb9vj 2 жыл бұрын

very nice video! me help quite

@tiaan_va 8 ай бұрын

The direct shortcut for commenting code in vscode is 'ctrl + /'

@loiuxxx Жыл бұрын

is there an existing boilerplate on this new module? im quite a newbie to sass and im currently using kitty giraudel boilerplate. , any sugestions?

@zen-zeo3223 2 жыл бұрын

thank u

@babyboyknace4936 2 жыл бұрын

Hi Jessica,I've been doing some learning,training and been practicing and lot of web development (full stack) and your videos have been helpful,I'd love to know if I can get a job as a web develop anywhere without a degree

@TheCoderCoder 2 жыл бұрын

It is possible-- some companies may still want a cs degree but others don't require one. Depending on the company and the job position you may have to practice algorithms for technical interviews. You can do this at places like LeetCode or the book Cracking the Coding Interview. Good luck!

@_moxy9905 Жыл бұрын

hey jessica! :) how to use dart-sass in react project?

@stephenlittle7688 2 жыл бұрын

is it better to use gulp then just the sass --watch scss:css ?

@groovebird812 2 жыл бұрын

I see no advantages to the older import syntax. It is complicated and more to write

@bogijeaa513 2 жыл бұрын

Is it better to use live sass compiler or gulp?

@TheCoderCoder 2 жыл бұрын

Live Sass is great for working locally. For working in a professional setting on a team you would need a build tool like Gulp, Webpack, etc.

@jaseem1448 2 жыл бұрын

What is the difference between browsersync and live server?

@malaydesign 2 жыл бұрын

When Will Coming Web development Course

@jasonspeziale7782 Жыл бұрын

This is great and all but about bootstrap 5 and dart sass there's no videos on this topic. Whats the story with this cause I'm using bootstrap 5 the old sass way but how do i do it with dart sass being bootstrap already is using the old syntactic. I need help and the uikit I'm using that has bootstrap 5 is using the old sass way @import.

@TheCoderCoder Жыл бұрын

From what I can tell, Bootstrap won't use the new Sass modules with @use and @forward until v6. On the Sass website, they've pushed back the deprecation of @import much further until more people are using Dart Sass. So I think you will have to use the old way until v6 comes out.

@jasonspeziale7782 Жыл бұрын

@@TheCoderCoder Ok can I use it for now cause I'm already using a ui kit I bought that don't use the new sass pluse I'm good with bootstrap and I'm trying to build my portfolio so I can get a job I don't wanna sit around and waste anymore time.

@jasonspeziale7782 Жыл бұрын

@@TheCoderCoder Also all those calc() errors I'm getting can I just go in and change them manually and it will work fine.

@funkyboy4882 2 жыл бұрын

she is awesome

@GamerSolitO 2 жыл бұрын

Nice thumbnail!

@TheCoderCoder 2 жыл бұрын

Thank you!

@malaydesign 2 жыл бұрын

Love From India ❤️

@Sonya_Makepeace 8 ай бұрын

The problem I've got is the live sass compiler extension I use in VS Code doesn't support the @use or @forward. I just get a compile error. It's fine when I use the import function though. I'm using the compiler by Glenn Marks, and even though it's recently updated, it doesn't support those newer functions, unless I've missed something. I can't be bothered to install another compiler, I want it kept simple.

@TheCoderCoder 8 ай бұрын

hmm, I've been using Glenn Marks' Live Sass Compiler for quite a while now, and it's never had a problem with @use and @forward. Maybe check that the extension is up to date, or perhaps you have a syntax error in your Sass?

@Sonya_Makepeace 8 ай бұрын

@@TheCoderCoder I've sorted it now. I was making the mistake of not adding the variables to every scss file that was using them. I haven't got around to using mixins yet, but I'm guessing it will be the same. I'm using them with a namespace. BTW, I love your colour theme for VS Code. I'm using it on all my computers.

@TheCoderCoder 8 ай бұрын

@@Sonya_Makepeace oh thank you! Glad you were able to figure it out!

@YOUdudex 2 жыл бұрын

Is sass even useful in 2021 with js frameworks like react, vue, angular etc when we have css in js solutions like styled-components

@TheCoderCoder 2 жыл бұрын

If you're working on a large site that is very component-driven then CSS-in-JS might be a better solution for that! But Sass and BEM are good ways to write and organize your styles if you're not super dependent on JS components.

@YOUdudex 2 жыл бұрын

@@TheCoderCoder Thanks for explaining!! :)

@nikhiltyagi6619 2 жыл бұрын

Name of this vs code theme?

@arthurplays6943 6 күн бұрын

I have a query if anyone can help, I have angular library i am creating for my company. I dont know how to setup global css in it. So what i did is I have created a src/lib/styles/styles.scss and using it in every components scss file like @use 'styles'; is this a good approch or there is better solution for this.

@malaydesign 2 жыл бұрын

You Are My Sister I Am Learning From Your video

@KangJangkrik 2 жыл бұрын

Video request: implement material design Seriously, I would gladly show that video to new employees

@ritroo492 2 жыл бұрын

What do I do when I press watch sass it doesn't generate any dist file

@TheCoderCoder 2 жыл бұрын

Thanks for joining the chat! Hope you were able to get your problem resolved!

@albertgalvez9424 2 жыл бұрын

Easiest way to comment a line is Ctrl + ? (question mark).

@fatgolem69 2 жыл бұрын

I like the drake meme style thumbnail

@PokerDKSTART 2 жыл бұрын

Has your video "Browsersync + Sass + Gulp in 15 minutes" become outdated with the rollout of this video? As I'm getting the following error message when i run gulp in the terminal: "Error in plugin "gulp-sass" Message: gulp-sass 5 does not have a default Sass compiler; please set one yourself.

@TheCoderCoder 2 жыл бұрын

Yes, you'll need to update the gulpfile based on what I did in the last section of this video 20:30

@PokerDKSTART 2 жыл бұрын

@@TheCoderCoder Yup, I've tried doing that, but then it threw the error: Error: Cannot find module 'sass', code: 'MODULE_NOT_FOUND'. I've tried removing gulp sass from my package.json and then installing the newest version, but I keep getting the same error. :/ By the way, thank you for the reply, love your content!