Sass @import is being replaced with @use and @forward
Vložit
- čas přidán 19. 05. 2024
- 🔥 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 - Věda a technologie
The thumbnail 😂❤️
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!
Thanks so much!! I appreciate it and I'm glad my videos are helpful for you!
@@TheCoderCoder very helpful Jessica
Thank you for your time making this video. I have learnt a lot from it. Have a prosperous 2022.
Please make a complete course on sass! It would help alot!
Thanks! I've been stubborn about using the new stuff. Figured it is time to start changing.
Remember you as a person who's made a great webdev roadmap.
Much love to your channel ❤️❤️❤️.
I was going to learn sass today evening 😂😂
Now I will start to learn from afternoon for this video
I wasn’t aware of the changes here so was great to find this video!
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
Yeah it takes a while to get used to the new syntax! Definitely took me a few tries to get it
The content quality is the best I have even seen in a coding channel
Although you taught me all about Sass but this time I've already learnt about these stuffs...
Keep it up 🤗🤗
Awesome! and thank you!
Let me hug you and thank you sincerely! I finally moved to the modules)))🥰🤗
really love your style of teaching, everything seems so simple 😊
can you tell where you find your background music?
Hey pretty, thank u so much, finally I could to learn how to use @use and @fordward.
Great explanation of @use! thank you! You have a gift (and my sub)!
Great and informative tutorial! Can you please tell me what color theme you are using on your VSC?
You are just awesome !! Subscribed
ctrl + / also works for comments
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 ^^
Thanks for the feedback! we're going to be turning down the music for future videos
14:08 thank you so much!
Best youtube channel for front end development
Thanks so much 🙏🏼
I love SASS thanks for give us more knowledge
Thanks for watching!
Thanks, it was really helpful
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 😂
Hope this video helps explain it!
@@TheCoderCoder Yea it did, cool video very detailed and we'll explained 😁👍
How is that every tutorial I need you post right away...
Hope this video is helpful for you!!
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.
PRECISELY!!! Right now this way of using Sass is annoying and overwhelming taking the sheer fun out of development.
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.
you can replace gulp with webpack. it's preferred for many even.
YOU ARE MY HERO (WEB HERO )
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.
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 -- czcams.com/video/nI0BfXFjI1I/video.html
Hope this helps for now!
hey jessica! :)
how to use dart-sass in react project?
Thumbnail is dope 👌😂
Thanks!
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...
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!
@@TheCoderCoder That does indeed help, thanks for taking the time to respond - appreciate it 😁
I want to be just like you. 😊 But I still need to study allot when it comes to coding.
Great video. I appreciate it
is there an existing boilerplate on this new module? im quite a newbie to sass and im currently using kitty giraudel boilerplate. , any sugestions?
That was helpfull, Thanks.
Please more videos like this
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
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!
is it better to use gulp then just the sass --watch scss:css ?
The direct shortcut for commenting code in vscode is 'ctrl + /'
Is it better to use live sass compiler or gulp?
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.
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.
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.
@@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.
@@TheCoderCoder Also all those calc() errors I'm getting can I just go in and change them manually and it will work fine.
When Will Coming Web development Course
Nice thumbnail!
Thank you!
very nice video! me help quite
What is the difference between browsersync and live server?
Is sass even useful in 2021 with js frameworks like react, vue, angular etc when we have css in js solutions like styled-components
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.
@@TheCoderCoder Thanks for explaining!! :)
Love From India ❤️
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.
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?
@@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.
@@Sonya_Makepeace oh thank you! Glad you were able to figure it out!
Easiest way to comment a line is Ctrl + ? (question mark).
thank u
I like the drake meme style thumbnail
I see no advantages to the older import syntax. It is complicated and more to write
Name of this vs code theme?
Video request: implement material design
Seriously, I would gladly show that video to new employees
You Are My Sister I Am Learning From Your video
she is awesome
Hotline bling thumbnail 😂
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.
Yes, you'll need to update the gulpfile based on what I did in the last section of this video 20:30
@@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!
why did you use root -- colors instead of scss $color
Please Make Step With Web Developer How
What do I do when I press watch sass it doesn't generate any dist file
Thanks for joining the chat! Hope you were able to get your problem resolved!
Woow that thumbnail
where is the git repository?
I give up at 5:12 we still haven't got to the point yet.
tfw coder coder makes drake meme format
haha yeppp 😂
I was gonna say that..but you took it from my mouth..
The music is loud... distracting my understanding ..and also ur theme in ur vscode .. not bright
pull my finger 👉
I swear they make things more complicated and add a lot of repetition
Just wondering why did you add this music?? it's irritating
use and foward are so bad
They're definitely kinda confusing