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

Подписаться 494 тыс.

Просмотров 38 тыс.

50% 1

🔥 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

Наука

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 104

@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 Год назад

@@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.

@shonuff4323 7 месяцев назад

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

@erenlothbrok4736 2 года назад

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

@BenDemeyere 11 месяцев назад

I wasn’t aware of the changes here so was great to find 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 Год назад

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

@bugoaneo Год назад

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

@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!

@financewithsom485 2 года назад

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

@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?

@sayutalks9721 2 года назад

You are just awesome !! Subscribed

@frontend3409 Год назад

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

@Manhleban Год назад

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

@NabeerDarVlogs Год назад

Thanks, it was really helpful

@ProgrammingwithShahan 2 года назад

Great video. I appreciate it

@kentmiggalen9756 2 года назад

14:08 thank you so much!

@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.

@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

@Daddasoft 2 года назад

I love SASS thanks for give us more knowledge

@TheCoderCoder 2 года назад

Thanks for watching!

@ThePHPElephant 2 года назад

That was helpfull, Thanks.

@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 😁👍

@kentmiggalen9756 2 года назад

Please more videos like this

@shubhammusmade5744 2 года назад

Best youtube channel for front end development

@TheCoderCoder 2 года назад

Thanks so much 🙏🏼

@bandarkhawaji 2 года назад

Thumbnail is dope 👌😂

@TheCoderCoder 2 года назад

Thanks!

@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 Год назад

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

@mobilepassiveincome6637 2 года назад

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

@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 -- ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nI0BfXFjI1I.html Hope this helps for now!

@tiaan_va 7 месяцев назад

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?

@useruser-xb9vj 2 года назад

very nice video! me help quite

@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 😁

@_moxy9905 Год назад

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

@malaydesign 2 года назад

YOU ARE MY HERO (WEB HERO )

@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!

@stephenlittle7688 2 года назад

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

@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.

@zen-zeo3223 2 года назад

thank u

@Sonya_Makepeace 7 месяцев назад

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 7 месяцев назад

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 7 месяцев назад

@@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 7 месяцев назад

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

@groovebird812 2 года назад

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

@malaydesign 2 года назад

When Will Coming Web development Course

@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.

@GamerSolitO 2 года назад

Nice thumbnail!

@TheCoderCoder 2 года назад

Thank you!

@malaydesign 2 года назад

You Are My Sister I Am Learning From Your video

@jaseem1448 2 года назад

What is the difference between browsersync and live server?

@fatgolem69 2 года назад

I like the drake meme style thumbnail

@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!! :)

@albertgalvez9424 2 года назад

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

@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!

@malaydesign 2 года назад

Love From India ❤️