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!
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
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 ^^
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.
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.
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.
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 -- th-cam.com/video/nI0BfXFjI1I/w-d-xo.html Hope this helps for now!
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.
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 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!
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.
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!
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!
Implementing use and forward in an already existing system is such a f******* pain in the ass. God, is this horrible. Good video and thanks for it though!
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.
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
I was going to learn sass today evening 😂😂
Now I will start to learn from afternoon for this video
Please make a complete course on sass! It would help alot!
Remember you as a person who's made a great webdev roadmap.
Much love to your channel ❤️❤️❤️.
I wasn’t aware of the changes here so was great to find this video!
Thanks! I've been stubborn about using the new stuff. Figured it is time to start changing.
The content quality is the best I have even seen in a coding channel
Let me hug you and thank you sincerely! I finally moved to the modules)))🥰🤗
Although you taught me all about Sass but this time I've already learnt about these stuffs...
Keep it up 🤗🤗
Awesome! and thank you!
Best youtube channel for front end development
Thanks so much 🙏🏼
Hey pretty, thank u so much, finally I could to learn how to use @use and @fordward.
How is that every tutorial I need you post right away...
Hope this video is helpful for you!!
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
Thumbnail is dope 👌😂
Thanks!
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.
Great explanation of @use! thank you! You have a gift (and my sub)!
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 😁👍
my import and use none of them work, im using an sass extension. whats the problem?
really love your style of teaching, everything seems so simple 😊
can you tell where you find your background music?
You are just awesome !! Subscribed
hey jessica! :)
how to use dart-sass in react project?
I see no advantages to the older import syntax. It is complicated and more to write
ctrl + / also works for comments
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!
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.
Great and informative tutorial! Can you please tell me what color theme you are using on your VSC?
The direct shortcut for commenting code in vscode is 'ctrl + /'
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.
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 -- th-cam.com/video/nI0BfXFjI1I/w-d-xo.html
Hope this helps for now!
is it better to use gulp then just the sass --watch scss:css ?
after about 10hr history dissertation on @import she finally get to the point around 10:25
lol thanks for sitting through the first 10 hours
What is the difference between browsersync and live server?
I love SASS thanks for give us more knowledge
Thanks for watching!
When Will Coming Web development Course
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.
I want to be just like you. 😊 But I still need to study allot when it comes to coding.
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!
Easiest way to comment a line is Ctrl + ? (question mark).
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
Name of this vs code theme?
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!! :)
14:08 thank you so much!
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 😁
Thanks, it was really helpful
Video request: implement material design
Seriously, I would gladly show that video to new employees
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!
Please more videos like this
Nice thumbnail!
Thank you!
I give up at 5:12 we still haven't got to the point yet.
YOU ARE MY HERO (WEB HERO )
Great video. I appreciate it
I like the drake meme style thumbnail
where is the git repository?
Implementing use and forward in an already existing system is such a f******* pain in the ass. God, is this horrible.
Good video and thanks for it though!
You Are My Sister I Am Learning From Your video
Love From India ❤️
Please Make Step With Web Developer How
That was helpfull, Thanks.
Hotline bling thumbnail 😂
tfw coder coder makes drake meme format
haha yeppp 😂
very nice video! me help quite
Woow that thumbnail
I was gonna say that..but you took it from my mouth..
thank u
The music is loud... distracting my understanding ..and also ur theme in ur vscode .. not bright
she is awesome
Just wondering why did you add this music?? it's irritating
pull my finger 👉
is there an existing boilerplate on this new module? im quite a newbie to sass and im currently using kitty giraudel boilerplate. , any sugestions?
I swear they make things more complicated and add a lot of repetition
use and foward are so bad
They're definitely kinda confusing