🚨 Hey folks, if you're having trouble with @forward not working, make sure you're using Glenn Marks' Live Sass extension, *not* the original one by Ritwick Dey. The original one won't work with the new Sass syntax!
@@stranger9951 This is the entire Sass/SCSS section except for the Gulp setup. The full course will then go on to build the actual website for the course
Hey i wanna say thank you very much ! your recomendations along with the kevin's powell were the best, I use all of this tutorials... recently I jumped to the next step wich is use the console with the sass comands lines like --watch and use sass on some few webpack project !
There is a VSCode extension where you can easily convert px to rem and vice versa. It also supports vw. It's called 'px to rem & rpx & vw'. That way it can eliminate all those unnecessary conversions and setting functions. I hope it helps.
👏 Amazing! This course is so in-depth, well thought through and current. It has provided me with updated knowledge that I really couldn't be bothered re-learning again, into an easy to follow and understand way. I have been using Sass for 10 years without really updating my knowledge, but within 2 hours I was ready to get started with modern Sass techniques. Thank you so much!!!
Out freaking standing! I've been looking all over youtube for a tutorial on Sass. Most of them are outdated and still use @import instead of @use and @forward I'm more of a visual learner, even though I read the documentation on the Sass website I still couldn't figure it out but your video is quite clear. Thank you so much for taking the time to create this awesome video!!! Keep up the great job you do.🔥🔥
I'm struggling to understand why, but the media-query example at 3:00:00 onwards doesn't seem to work when I try to reproduce your code, even though I double checked the functions and everything has been working so far. The devtools reads "@media (min-width: 56.25em)" but the layout does not change as it does in your video. Am I the only one encountering problems at 3:00:00 example? Upd.: Funny how in Google Chrome it seems to work, but not in Mozilla. Go figure.
I really enjoyed how you organized the content and went over the fundamentals, it made learning Sass super easy and enjoyable. I was also able to brush up on a few CSS techniques. Thank you for sharing this amazing tutorial!🙌🏼
Would you recommend trying this tutorial even if I'm still on the basics of learning HTML and CSS? I've been struggling to pick the right way to start my first project. Thanks again!
If this is for beginners where is the part where you create the project folder with gitattributes and license etc. I know how to create a folder file etc on vs. If this is for beginners how is a beginner going to know how to create licence, app, read me or we gettng this informatin from github? Sorry for the dumb question. But if you are going to make a beginners video at least show us how you created the project folder with the items in it. No being ungreatful but you do get paid for views and things like this cause people to look at other video's to find the solution causing wasting time etc. In my suggestion now Traversy media has come up I am gonna now check him out to see if he shows me. I didn't even get 2 minutes in. The beginners bit is misleading. Please tell people before hand what we need to know before starting these video. Its TIME I don't get back.
Thanks alot for putting this tutorial out. Please i have been trying to get the "Watch Sass" to work but it is not working please any advise would really help and i was thinking we can download the startup file for this course. Please anyone can help me out cause i really want to learn.
Hello coder coder, I pray you see my comment.... Pls do a tutorials on how to make an actual real time login and sign up form... Most of the videos on UA-cam just show how you can do it using html, css & javascript But the annoying part is it doesn't work in real time, it's just like a beautiful car without an engine so it's technically useless...
I'm in love with your content in general, extremely significant. This is high quality for people like us who enjoy learning more every day about web development. Greets from Paraguay
Just to be clear: the notion that font-size should be set in rem is debatable, and the vast majority of companies, including the major news sites, use pixels. It's not because they hate people with disabilities. It's because the Ctrl + function works just fine when the font-size is in pixels. The browser saves that preference when you zoom into a site, so you don't have to zoom in every time you come back.
Thank you so much for this, this is awesome! Thank you for all your hard work and all the videos you put out for beginners. Your channel has helped me personally more than you know!!
Hey Jessica ! Love your videos, they are very helpful. Could you make a video on how to apply JavaScript into a HTML and CSS based project. I am well versed with html and css now, and have started learning JavaScript, but i don't have a clue of how it can be applied to my projects. Also if anybody from the comments section can guide me on this, I'll be very grateful !!! :)
hmm, strangely.. when I do the shft+alt+p I do not get that option of " open settings json " ; I do however get the other JSON settings. I have to actually go into preferences to access it via the menu.. file > preferences etc..
Thank you so much for this heavenly walkthrough still on the first half of the tutorial I wanted to bring to your attention that the sass compiler said this using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0 Recommendation: math.div($pixels, $context) or calc($pixels / $context)
Thank you so much for this course, this is the only course I've seen that uses the new @use and @forward at rules for the structure of the project. Also, thank you for the explanation on the BEM metholodogy. Great course!
Hi! I'm so grateful to you for sharing this, even though I've been using most of the concepts in my work already, however I got an in depth perspectives working alongside and served as a brief brush up. I tuned in through out the course and was able to learn the things I didn't knew, for instance, the @extend rule, sass placeholder, and the last one utility classes. Thanks again as I'm so happy to get to know them ;)
Hi Coder Coder! I've been following u for some time now. You're the one that inspired to me to learn Sass. You make it look so easy. I enjoy your live coding sessions and you showing the process of research that no coding channel does. That makes me feel that if you can do it, anyone can do it and that gives me so much motivation. I just have one question, I came across to this problem last week where I have to change the color of the background of the body element dynamically depending on what the user choose and I found out that Javascript can't use Sass variables to do it programatically. So I am wondering if you can use Sass variable and CSS variable along with each other? I.E. //SCSS :root{ --dayMode: #fff; --nightMode: #000; $dayMode : var(--dayMode); $nightMode: var(--nightMode); } body{ background-color: $dayMode; } //js if(user.choose(mode)) { body.style.backgroundColor = `var(--${mode})`; // mode = 'dayMode' || 'nightMode'; } This is only a rough example but I structure it like this because I still want to use sass variables somewhere in my sass codes. Is this a bad practice? Please continue to make videos that will inspire us beginners.
Yes, I would definitely use CSS custom properties when you need to change the color dynamically! And I think it's totally ok to use both in the same project. I'm glad that my videos have been helpful to you!
Great video, i was only looking to learn SASS but learning BEM and Responsive Design at the same time , and a ton of other cool tips throughout , was very helpful.
Fantabulous , awesome and only video to watch if u want to learn saas. At the beginning it looks like what the fcuk is SAAS once u get use to syntax and learn the advantages of using saas over css u will be thrilled and u will never regret about SAAS
Great job! Booking a night off to go through this a few times. The quality is top notch and the teaching is down to earth and easy to follow. Love all of your videos! Can't wait for the full course!
I followed along every step of the way and learned a ton. I've used CSS for years, but this was my first SASS/SCSS exposure and wow is it going to be helpful moving forward.
Hi Jessica, thanks for this wonderful course on sass. It super helpful. Pls I've got some questions. I want to know if it is possible to use sass in a project together with styling frameworks like Bootstrap or Tailwind. If yes is it recomended ? or it just best to use sass with pure css coding only with no frameworks. And I want to know if the same thing can be applied when using frontend frameworks like react which normally have some inital files like App.css can we use sass in this too and make it transpile to the App.css?
Why is it at some point of viewport width (let's say 700px) my h1 and h2 has the same size until 900px or higher? Obviously my h1 settings is higher than my h2. Is this some kind of bug?
We also made use of the live sass compiler, so basically I think what this does is saving us time intalling sass and having to watch and transpile the sass files manually in the terminal. Am I right about this?
Sorry if I'm missing something but I can not find the starter files anywhere. I am 10 mins into the tutorial and haven't seen the files linked in the description. I have also checked your github and don't see them. Are these paid only starter files? A little help please. I would really like to do this course.
This is no mouth wash or something to sweeten the whole stuff here. You are the best I honestly saying it, your explanation is so calm and I followed every process step by step... And now you just inspired me to learn SCSS.. I came across your channel and you just won my heart n I just subscribed and sending my friends n students to your channel to get more contents just like I did to Kevin Powell channel too💖💖 Thank you for these piece... Please keep the good work✌️✌️👍👍📸
hi I have question I want to make social media platform I designed %50 of design but Im single inthis project I chase flutter for performance this app will be lik tiktok atleast and will flutter got over about performance? and I chase firebase cloud too , I know native is best but as ı said ım single in the future can ı change flutter to native langs ? will this be pproblem for me ? / I love ur videos and u re proffesional about coding pls help me with my questions
I cannot edit the json file. It is read-only. There are a few to choose from, but I was trying to alter the open default settings.json. There is a UI settings, User settings. There is the Open Live Sass window... I have the correct version.
My gratitude to you for all you have done, which I will never forget. I truly appreciate you and the time you spent helping me on many occasions. Thank you very much for the course. I enjoyed every minute of your lecture as well as your marvelous sense of humor.
I loved your channel ma'am 😍, But I have a problem like I have to build a project but I waste all day spending on social media and when I go to bed 🛏️ I become so mad at myself that why I am waisting all time, can you help me how to manage my time
Hello, im learning advanced css and i encountered many problems when i started using scss and node, like my packages are not installing, pictures not loading up when i turn on scss. I tried doing a course but its 5years old, could anyone recommend any website where i could learn to use it properly ?
Do you know what would have to be done to programme a website like background remover and put it up on google like a tool for people to come and use for something like remove a background?
Thanks!
Thank you so much!
@@TheCoderCoder Hi, when will you launch your responsive design course?
Awesome. This is really well-taught. And I love the subtle animations and transitions. It is clear you put a lot of thought and love into this course.
@@fazebook7897 did you just disrespect the creator of free code camp? That’s all sorts of wrong!
"the thirst is real "🤓
🚨 Hey folks, if you're having trouble with @forward not working, make sure you're using Glenn Marks' Live Sass extension, *not* the original one by Ritwick Dey. The original one won't work with the new Sass syntax!
You are to good in teaching thanku mam
Is this the content of your complete web development course for the SASS/SCSS part?
@@stranger9951 This is the entire Sass/SCSS section except for the Gulp setup. The full course will then go on to build the actual website for the course
Hey i wanna say thank you very much ! your recomendations along with the kevin's powell were the best, I use all of this tutorials... recently I jumped to the next step wich is use the console with the sass comands lines like --watch and use sass on some few webpack project !
There is a VSCode extension where you can easily convert px to rem and vice versa. It also supports vw. It's called 'px to rem & rpx & vw'. That way it can eliminate all those unnecessary conversions and setting functions.
I hope it helps.
Thank you! ❤...
Thanks!
👏 Amazing! This course is so in-depth, well thought through and current. It has provided me with updated knowledge that I really couldn't be bothered re-learning again, into an easy to follow and understand way. I have been using Sass for 10 years without really updating my knowledge, but within 2 hours I was ready to get started with modern Sass techniques. Thank you so much!!!
Awesome! So glad that this video helped you! Sass is great 🔥
it's really great and learned a lot.
How to handle responsiveness if the user sets the display resolution to 150% or below 100%
Hey sister, why are you not making videos last three months.
Out freaking standing! I've been looking all over youtube for a tutorial on Sass. Most of them are outdated and still use @import instead of @use and @forward I'm more of a visual learner, even though I read the documentation on the Sass website I still couldn't figure it out but your video is quite clear. Thank you so much for taking the time to create this awesome video!!! Keep up the great job you do.🔥🔥
Glad this could help you with Sass!
totally agree with you. It is an amazing course and learnt a lot from her.
Wow this video is packed with cool stuff. It's not just sass but there's Bem ,responsive design and more cool 😎
GREAT COURSE 😍😍
Just a question,
Do we have the code somewhere online? maybe a Github repo?
I'm struggling to understand why, but the media-query example at 3:00:00 onwards doesn't seem to work when I try to reproduce your code, even though I double checked the functions and everything has been working so far. The devtools reads "@media (min-width: 56.25em)" but the layout does not change as it does in your video. Am I the only one encountering problems at 3:00:00 example? Upd.: Funny how in Google Chrome it seems to work, but not in Mozilla. Go figure.
I really enjoyed how you organized the content and went over the fundamentals, it made learning Sass super easy and enjoyable. I was also able to brush up on a few CSS techniques. Thank you for sharing this amazing tutorial!🙌🏼
can you tell me what software do you use for video editing and for thumbnails also
The quality of this video makes me want the full course even more! Thanks for all your hard work making this!
I recommended my college mates ( literally 12 people) and bro they loved it😭. Everyone respect me now lmaoo
Much love to you haha❤
Would you recommend trying this tutorial even if I'm still on the basics of learning HTML and CSS? I've been struggling to pick the right way to start my first project. Thanks again!
If this is for beginners where is the part where you create the project folder with gitattributes and license etc. I know how to create a folder file etc on vs. If this is for beginners how is a beginner going to know how to create licence, app, read me or we gettng this informatin from github? Sorry for the dumb question. But if you are going to make a beginners video at least show us how you created the project folder with the items in it. No being ungreatful but you do get paid for views and things like this cause people to look at other video's to find the solution causing wasting time etc. In my suggestion now Traversy media has come up I am gonna now check him out to see if he shows me. I didn't even get 2 minutes in. The beginners bit is misleading. Please tell people before hand what we need to know before starting these video. Its TIME I don't get back.
Thanks alot for putting this tutorial out. Please i have been trying to get the "Watch Sass" to work but it is not working please any advise would really help and i was thinking we can download the startup file for this course. Please anyone can help me out cause i really want to learn.
Hello coder coder, I pray you see my comment....
Pls do a tutorials on how to make an actual real time login and sign up form...
Most of the videos on UA-cam just show how you can do it using html, css & javascript
But the annoying part is it doesn't work in real time, it's just like a beautiful car without an engine so it's technically useless...
Nice 👏🏻 I love css and so for that sass, tailwind and pure css 🧑🏻💻
Waiting for the Beginners portion to start, gesh, FML!
Finnaly a video after a loooong time😁😁
I WAS LITERALLY GONNA IMPLEMENT SASS ON MY NEW BLOG
thank you so much
Finally a video on Sass !!! I didn't even watch yet but I now its gonna be 🔥
5:45 before deleting, ctrl + space also show options.
When you think of a topic and one of your favorite youtubers upload a 4 hours course about it. Bless you.
I'm in love with your content in general, extremely significant. This is high quality for people like us who enjoy learning more every day about web development. Greets from Paraguay
She ❤️ is beautiful 😍. and beautiful code.
Needed this so bad! Thankyou Jessica 😭😭
One thing that i need is your files for i follow what you do.
Just to be clear: the notion that font-size should be set in rem is debatable, and the vast majority of companies, including the major news sites, use pixels.
It's not because they hate people with disabilities. It's because the Ctrl + function works just fine when the font-size is in pixels. The browser saves that preference when you zoom into a site, so you don't have to zoom in every time you come back.
When the impostor is sass
Thank you so much for this, this is awesome! Thank you for all your hard work and all the videos you put out for beginners. Your channel has helped me personally more than you know!!
Hey Jessica ! Love your videos, they are very helpful. Could you make a video on how to apply JavaScript into a HTML and CSS based project. I am well versed with html and css now, and have started learning JavaScript, but i don't have a clue of how it can be applied to my projects. Also if anybody from the comments section can guide me on this, I'll be very grateful !!! :)
hmm, strangely.. when I do the shft+alt+p I do not get that option of " open settings json " ; I do however get the other JSON settings. I have to actually go into preferences to access it via the menu.. file > preferences etc..
Thank you so much for this heavenly walkthrough still on the first half of the tutorial I wanted to bring to your attention that the sass compiler said this
using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0
Recommendation: math.div($pixels, $context) or calc($pixels / $context)
I'm documenting everything i learn as a 'vlog'/'series' type thing and this video helped me out a lot in the last episode! Thanks a lot
Completed this sass course and I gotta say, there are some things in sass which makes it unnecessarily complicated. Especially for beginners.
this is an amazing way to code!!
Thank you so much for this course, this is the only course I've seen that uses the new @use and @forward at rules for the structure of the project. Also, thank you for the explanation on the BEM metholodogy. Great course!
So glad this could help!!
Great job, Coder Coder
I've missed you!
Best video I watched about RWD, very well explained and easy to understand. A thumbs up it's not enough for your work, congrats for the awesome job!
Thanks 🙏🙏🙏 for this.. and You uploaded the video after a long time .
Excellent, ❤😍 i was really waiting. Now it's time to watch. Thank you very much
Hi! I'm so grateful to you for sharing this, even though I've been using most of the concepts in my work already, however I got an in depth perspectives working alongside and served as a brief brush up. I tuned in through out the course and was able to learn the things I didn't knew, for instance, the @extend rule, sass placeholder, and the last one utility classes. Thanks again as I'm so happy to get to know them ;)
I have been waiting since last year 😭. Tell us when the full course will be ready. You rock 🤗
Even when she goes on small tangents they are so relevant and useful. High value video and worth watching beginning to end
👍🏼👍🏼 Thanks
Hi Coder Coder! I've been following u for some time now. You're the one that inspired to me to learn Sass. You make it look so easy. I enjoy your live coding sessions and you showing the process of research that no coding channel does. That makes me feel that if you can do it, anyone can do it and that gives me so much motivation.
I just have one question, I came across to this problem last week where I have to change the color of the background of the body element dynamically depending on what the user choose and I found out that Javascript can't use Sass variables to do it programatically. So I am wondering if you can use Sass variable and CSS variable along with each other?
I.E.
//SCSS
:root{
--dayMode: #fff;
--nightMode: #000;
$dayMode : var(--dayMode);
$nightMode: var(--nightMode);
}
body{
background-color: $dayMode;
}
//js
if(user.choose(mode))
{
body.style.backgroundColor = `var(--${mode})`; // mode = 'dayMode' || 'nightMode';
}
This is only a rough example but I structure it like this because I still want to use sass variables somewhere in my sass codes. Is this a bad practice?
Please continue to make videos that will inspire us beginners.
Yes, I would definitely use CSS custom properties when you need to change the color dynamically! And I think it's totally ok to use both in the same project. I'm glad that my videos have been helpful to you!
Great video, i was only looking to learn SASS but learning BEM and Responsive Design at the same time , and a ton of other cool tips throughout , was very helpful.
It is not a 4 hour course. It is only 3 hours 45 minutes 10 seconds long. 😢
Best UA-camr ever! inspired me to learn sass! which makes it fun to write css 😁✌️
Damn! I FINALLY started studying Sass yesterday. This video came just in time! 😎
Great introduction. 🙋🏻♀️😃 Always a fan!
The "Preference: Open Settings (JSON)" is not showing in the command pallete. 3:04 mark. Can someone help me:((
Fantabulous , awesome and only video to watch if u want to learn saas. At the beginning it looks like what the fcuk is SAAS once u get use to syntax and learn the advantages of using saas over css u will be thrilled and u will never regret about SAAS
Great job! Booking a night off to go through this a few times. The quality is top notch and the teaching is down to earth and easy to follow. Love all of your videos! Can't wait for the full course!
I followed along every step of the way and learned a ton. I've used CSS for years, but this was my first SASS/SCSS exposure and wow is it going to be helpful moving forward.
Hi Jessica, thanks for this wonderful course on sass. It super helpful. Pls I've got some questions.
I want to know if it is possible to use sass in a project together with styling frameworks like Bootstrap or Tailwind. If yes is it recomended ? or it just best to use sass with pure css coding only with no frameworks.
And I want to know if the same thing can be applied when using frontend frameworks like react which normally have some inital files like App.css can we use sass in this too and make it transpile to the App.css?
You’re awesome 🤩 I can’t believe this is being offered to us for free !
Wonderful. You are just awesome teacher and I never felt bored or dull even after straight up 2hr class. Keep doing the good work.
Yay I can't believe! This video came at the right time for me!
Why is it at some point of viewport width (let's say 700px) my h1 and h2 has the same size until 900px or higher? Obviously my h1 settings is higher than my h2. Is this some kind of bug?
please my dist folder keep on creating a new css documents .
why should i do
We also made use of the live sass compiler, so basically I think what this does is saving us time intalling sass and having to watch and transpile the sass files manually in the terminal. Am I right about this?
I like your stuff, style, and the way you say "Let's get into it!"
Spent an hour figuring out how to use @use instead of @import. My variables still not working. Not using SASS anymore goodbye.
Sorry if I'm missing something but I can not find the starter files anywhere.
I am 10 mins into the tutorial and haven't seen the files linked in the description. I have also checked your github and don't see them.
Are these paid only starter files? A little help please. I would really like to do this course.
This is no mouth wash or something to sweeten the whole stuff here. You are the best I honestly saying it, your explanation is so calm and I followed every process step by step... And now you just inspired me to learn SCSS.. I came across your channel and you just won my heart n I just subscribed and sending my friends n students to your channel to get more contents just like I did to Kevin Powell channel too💖💖
Thank you for these piece... Please keep the good work✌️✌️👍👍📸
Thanks for your very kind words!
hi I have question I want to make social media platform I designed %50 of design but Im single inthis project I chase flutter for performance this app will be lik tiktok atleast and will flutter got over about performance? and I chase firebase cloud too , I know native is best but as ı said ım single in the future can ı change flutter to native langs ? will this be pproblem for me ? / I love ur videos and u re proffesional about coding pls help me with my questions
I cannot edit the json file. It is read-only. There are a few to choose from, but I was trying to alter the open default settings.json. There is a UI settings, User settings. There is the Open Live Sass window... I have the correct version.
My gratitude to you for all you have done, which I will never forget. I truly appreciate you and the time you spent helping me on many occasions. Thank you very much for the course. I enjoyed every minute of your lecture as well as your marvelous sense of humor.
There is no open settings(json) option though. I only have like open user setting - open default settings etc. any alternative miss? Thank you
HI Coder Coder! I am getting this error in sass " cant find stylesheet to import" what exactly should i do to fix this? Great Video!
What about the property clamp() to create a dynamic sizes with min-max values?
I loved your channel ma'am 😍,
But I have a problem like I have to build a project but I waste all day spending on social media and when I go to bed 🛏️ I become so mad at myself that why I am waisting all time, can you help me how to manage my time
Hie my boostrap 5 ui kit I bought is using sass and gulp but its using @import I'm guessing I have to manually change them all to @forward .
Haha, nice try, but you can't teach sass. It's something you're born with. Am I right, ladies?
Thanks a lot for your useful contents, I appreciate you because of these valuable information , ❤️ from Iran country
Hello, im learning advanced css and i encountered many problems when i started using scss and node, like my packages are not installing, pictures not loading up when i turn on scss. I tried doing a course but its 5years old, could anyone recommend any website where i could learn to use it properly ?
My Laptop just died on me as I was building few projects and I can't afford another one. 😭
cmd + / comments the whole line out and you dont need to highlight the whole line. Just put the cursor anywhere on the line...
Hey, there's no "preference: open settings (json)" anymore. At least I couldn't find it.
Belated Happy Teacher's day ma'am!! And thnx for the course...
Can you do Jest tutorial with react please?
Thanks for this but how come there are not starter files? i was going to buy your course too but that's not availalble.
What kind of units should I use with padding, margins, border??
Do you know what would have to be done to programme a website like background remover and put it up on google like a tool for people to come and use for something like remove a background?
Excellent 👍👍 I would like to know about Gawk. Will be waiting....
what about responsive images? changing a source file of the image to smaller with media queries?
@forward producing an errol, saying errol import stylesheet
Hi, I have a video idea. Could you please make a video explaining what CMake is, and how to use it?
Where are you I Miss you and your vids so much.... please come back......😞
Hi there! Missing this face on youtube! Greetings from Algeria
hello, what are the extensions are your using in vs code madam? can you tell me please?
Right when I needed it the most...Thanks Jessica🤗
Why did not she use partial for fonts ? Is it because of she wanted to show us modules?
Thank you so much! You're the best 🤗
if you could get back : ctrl + / comment any line the cursor is landing on
Really good course, It's really well-taugh! thank you