Thank you so much for this. This is amazing Note to self coz im sure ill keep coming back here variables 8:43 maps 10:04 nesting 13:00 imports 17:00 functions 19:40 mixins 22:45 extensions 30:20 operations 32:00
Just a modular tip: You don't need to write @import each time you import a partial: You can simply add a comma and continue on the same line. @import "config", "main", "home", "menu", "about", etc;
@@chubbyBunny94 bro not to discourage you, but after selflearning react during lockdown and bagging a job, i quit the job in 2 weeks. 9 hrs of me and the computer was so boring and mind F*@king, i couldn't take it. Ps- I'm a computer engineering graduate
Thanks. This is the first tutorial on anything related to CSS that I got all the way through without rocking on the floor in the fetal position crying.
Quick Tip: Change the savePath for the scss compilation to "~/../dist/css" if you want your css to be compiled relatively to whereever your scss is, not relatively to where the terminal is opened at. The options can be found in the same settings.json file in which you tweaked the scss config at the beginning of this tutorial, check 2:15. Took me 5 minutes+ to figure it out, might save you those precious 5 minutes :)
The explanation about "em" and "rem" differentiation was cristal clear and extremely short compare at when i was looking for an explanation. Thank you for the lesson !
In the example that the TH-camr showed in the latter section, the part "home, projects, contact me" is shown in row, not column @41:30，it is because the TH-camr have erased the tags and tags.
variables 8:43 maps 10:04 nesting 13:00 imports 17:00 functions 19:40 mixins 22:45 extensions 30:20 operations 32:00 Credit: @Lilibeth Fabregas "Thank you so much for this. This is amazing Note to self coz im sure ill keep coming back here"
37:43 There is one important issue anyone didn't spot. Watch out for headings order - h2 comes after h1. As long as it's not related to navigation, this may disrupt page content flow and lead to SEO and accessibility related problems.
for those of you using a terminal (Linux), here is a very easy way of compiling your sass whilst using any text editor: install sass via npm open the directory with your files in it open the terminal in that location execute the following command: while true; do sass sass/style.scss style.css; sleep 2; done command explained: while true; - starts a while loop do - what it should do sass - you installed this earlier sass/style.scss - your scss file (this may change) style.css; - your css file (this may change) sleep 2; - the interval at which it should refresh/compile (in seconds) done - ends the code to stop the loop from running, just press ctrl+c
Thanks for this video. Great and easy. We can improve this by using a single "open" class. This SASS works for me. &.open { visibility: visible; .menu-nav { transform: translateY(0); &__item { transform: translateX(0); } } }
Awesome tutorial, not only did I learn SASS, I also learned how to structure my css and html a lot nicer. FYI: I was stuck on an issue with css not updating which left me baffled for about an hour because I messed up the directory structure and sass compiler live kept creating a new /dist/dist/css folder and compiling main.css there. At first, I was frustrated with the extension, then I felt silly. Be very attentive!
I really love this video, I have learned a lot with a p´rosessional one. What i apreciate the most is that the speach its at very easy to follow speed and the pronunciation is excelent. This is important so it can be understood all around the world. Thanks a lot Sir !!!
I'm really grateful that I have learnt from this course a lot of insight. Please keep up the good work and encourage you'll to post such amazing courses looking forward to see more..Well done guys for wonderful course..😍😍😍
Whit the amount of practice I have done(not even month, but is the only thing I have been doing) before this, I'm digesting this coding along so easily TYSM! @forward is deprecated btw
Nice, I also subscribed to the CodeStackr channel, I used the basics of Sass some time ago but this is a great video to remember how to use and also learn new functionaties
Its late and i know i cant what till the end. I Will watch it for sure later. Its a must subscribe channel for sure. Congratulation .. u are very clear in your explanation
The address icon doesn't load. Should be: " Address " in html files. And instead of adding and removing "open" class you can simply toggle it in one function. Very good video!
Thanks Beau, very informative. Unlike the competetors teaching sass you get to the fundamentals that assist beginners in the early stages of development. Cheers :)
i noticed in the tutorial for sass in the Front End Development Libraries section that there was no mention that sass has two syntax's "an original .sass and the more popular .scss that can be used with plain css" this led to confusion at first when attempting to configure a codepen after learning through FCC alone that led to me digging and finding this video that clearly states there is indeed two syntax's. i was just wondering why this information wasn't added to the courses as well.
Thanks for the video! If you have a problem with changing the path of the "savePath" name, then just make sure you are changing the exact Live Sass Compiler settings .json file. Because there is more than one .json file and you might select not the right one. And, yes, I made this mistake as well...
... the fact is, that all the time we save when we start using tools like sass, whilst we are developping our code, we are going to lose it when it will be the time to decode another people project. Anyway really good video.
An amazing tutorial. Thank you for it! I don't know where to use all these knowledge, especially functions because it makes the whole thing a little bit crabbed and huge while the problem small is. But may be I'll grow up to that one day. :D
Thank you so much for this. This is amazing
Note to self coz im sure ill keep coming back here
variables 8:43
maps 10:04
nesting 13:00
imports 17:00
functions 19:40
mixins 22:45
extensions 30:20
operations 32:00
Note to Note kz ill keep coming back here.
tactical comment
Get back here. You can do this!
Dot
note cuz I'm too lazy to type these myself
Just a modular tip: You don't need to write @import each time you import a partial: You can simply add a comma and continue on the same line. @import "config", "main", "home", "menu", "about", etc;
thanks, really helpful will put it in my notes
@@blonduose same... damn I have like lots of notes.
@@alexradu1921 same...again XD
Wow thats really work when i test thanks for that its simply and graet idea
every job I've had founds on this because of readability, sadly
've been using scss for years, didn't know half of features until this tut
Somehow your comment comforts me as i am a beginner dev..
@@noonefromearth2916 lol same here, I've got my first day as a junior dev tomorrow and I thought I knew scss.Man how wrong was I
@@chubbyBunny94 bro not to discourage you, but after selflearning react during lockdown and bagging a job, i quit the job in 2 weeks. 9 hrs of me and the computer was so boring and mind F*@king, i couldn't take it.
Ps- I'm a computer engineering graduate
@@noonefromearth2916 that’s fair
Nah I’m not discouraged. I’ve tried so hard to get a dev job. Now I’ve got one, I’ll do all I can not to let it go!
@@chubbyBunny94 how much did it take you to get the job?
Thanks. This is the first tutorial on anything related to CSS that I got all the way through without rocking on the floor in the fetal position crying.
Sass literally has everything that I wanted to do in CSS, like nesting properties inside of other properties. Thanks for the tutorial btw👍
Quick Tip: Change the savePath for the scss compilation to "~/../dist/css" if you want your css to be compiled relatively to whereever your scss is, not relatively to where the terminal is opened at. The options can be found in the same settings.json file in which you tweaked the scss config at the beginning of this tutorial, check 2:15.
Took me 5 minutes+ to figure it out, might save you those precious 5 minutes :)
Great, thank you :)
so you chose his third option or the first one with different path?
for a reason it keeps not working for me
i've been throwing punches at the table for a day straight because of this, thank you!
Took me 24 hours to get this typed out. I know the source is on github, but I just wanted to get used to it. Thanks, awesome as SASS is
Wow, one of my 2 requests has been met. Now I only wish for a nice Typescript tutorial. Great job guys!
And your another request was met
めちゃお世話になりました！
英語もSASSも学べて非常に有意義な動画でした！！
ありがとうございます！！
Sass is the best and most powerful CSS preprocessor card-body and card-head
Bless you guys.
In the name of open source
The explanation about "em" and "rem" differentiation was cristal clear and extremely short compare at when i was looking for an explanation.
Thank you for the lesson !
Free code camp is just the best place for a new comer to learn code.
Have watched the other SASS tuts. This one is the benchmark. But so grateful to all who give their time and knowledge thank you
In the example that the TH-camr showed in the latter section, the part "home, projects, contact me" is shown in row, not column @41:30，it is because the TH-camr have erased the tags and tags.
Such a great and understandable course!!! This helped me fully understand Sass. Thanks guys!
24 minutes in and I can't believe I waited so long to learn this. Subscribed.
Thanks a lot for this wonderful training! Not easy to keep focused for 2 hours and keeping the audience focussed as well, really nicely presented
variables 8:43
maps 10:04
nesting 13:00
imports 17:00
functions 19:40
mixins 22:45
extensions 30:20
operations 32:00
Credit: @Lilibeth Fabregas
"Thank you so much for this. This is amazing
Note to self coz im sure ill keep coming back here"
37:43 There is one important issue anyone didn't spot. Watch out for headings order - h2 comes after h1. As long as it's not related to navigation, this may disrupt page content flow and lead to SEO and accessibility related problems.
Thanks so much for this! I've been seeing so many jobs ask for Sass knowledge, and I finally took the time to learn it with this video!
I learned a lot from this. Thanks! For consistency I think there a several styles that could have been made mixins in this tutorial that weren't.
You are a natural and gifted teacher. Thanks for this tutorial and the others you have created.
the custom sass save in setting was really helpful, THANK YOU!
for those of you using a terminal (Linux), here is a very easy way of compiling your sass whilst using any text editor:
install sass via npm
open the directory with your files in it
open the terminal in that location
execute the following command:
while true; do sass sass/style.scss style.css; sleep 2; done
command explained:
while true; - starts a while loop
do - what it should do
sass - you installed this earlier
sass/style.scss - your scss file (this may change)
style.css; - your css file (this may change)
sleep 2; - the interval at which it should refresh/compile (in seconds)
done - ends the code
to stop the loop from running, just press ctrl+c
great tutorial man, really appreciated how you constantly reinforced ideas introduced earlier in the tutorial
Awesome: simple, direct, exaustive, no useless discussion. Really a great job! Thanks
Thanks for this video. Great and easy.
We can improve this by using a single "open" class. This SASS works for me.
&.open {
visibility: visible;
.menu-nav {
transform: translateY(0);
&__item {
transform: translateX(0);
}
}
}
Thank you for putting your time and effort into this tutorial, it was really helpful to me
Awesome tutorial, not only did I learn SASS, I also learned how to structure my css and html a lot nicer.
FYI: I was stuck on an issue with css not updating which left me baffled for about an hour because I messed up the directory structure and sass compiler live kept creating a new /dist/dist/css folder and compiling main.css there. At first, I was frustrated with the extension, then I felt silly. Be very attentive!
OMG,I just yesterday tried to find any video about sass. And now it's here....Thnx
Thanks for this amazing tutorial about sass.I feel like you are a good man,i like the the way you go slowly to explain things.
Best SCSS tutorial I've seen so far - Thank you
omg your video is wonderful, I learned a lot more with 30 minutes of your video than 2h of my classes. Please keep doing such an amazing content !!
Thanks! that is just utterly easy to understand! I enjoyed every minute of your video!
Awesome tutorial! Just wish you'd save more often so that we could see the effect of each line of styling.
... and that's why we follow along ;)
Great course. Coded along for a few hours. Thanks!
I really love this video, I have learned a lot with a p´rosessional one. What i apreciate the most is that the speach its at very easy to follow speed and the pronunciation is excelent. This is important so it can be understood all around the world. Thanks a lot Sir !!!
What an absolutely rocking video. Incredible content, and an exceptional teacher as well. Very lucid and expressive.
I'm really grateful that I have learnt from this course a lot of insight. Please keep up the good work and encourage you'll to post such amazing courses looking forward to see more..Well done guys for wonderful course..😍😍😍
By far the best tutorial video I have seen on TH-cam, thanks a lot!
Your all tutorial was awesome. This Sass tutorial was so easy. Thanks for giving such a simple way. It was very helpful
Man, this project was really educational and fun to do.
Thank you, Jesse
Really awesome video man, first time I’ve stuck around till the end without skipping constantly 🤪
Thanks a lot for this, Sass is really great and I just loved nesting! And I also learned how to properly structure my code
I really loved this tutorial, thank you so much, it helped me a lot
A very good tutorial & easily understandable!! Thanks Man ...🤗
Its a beautiful way of explaining the SASS concepts. Thanks a lot!!
nice work with the burger/cross menu transitions
Confused why the in the automatically looks as if display: inline has been applied in css? Mine doesn't do that, I have to add that in
Whit the amount of practice I have done(not even month, but is the only thing I have been doing) before this, I'm digesting this coding along so easily TYSM!
@forward is deprecated btw
Great, after this video and some note-taking, we can add SCSS to our skills in CV.
Nice, I also subscribed to the CodeStackr channel, I used the basics of Sass some time ago but this is a great video to remember how to use and also learn new functionaties
Really helpful SASS tutorial. Thanks
Its late and i know i cant what till the end. I Will watch it for sure later. Its a must subscribe channel for sure. Congratulation .. u are very clear in your explanation
Thank you so much, it is really, really helpful
These people always come with complete explanation of topics too good sass is what i was thinking to invest my some time on
this was awesome. thanks for such clear concepts!
Thank you so much. This is a really useful post !!!
Great tutorial, clear explanation, thanks a lot man!!
Thank you so much for blasting quickly through the basics at the beginning. I get so bored and frustrated with super slow videos. Happy, happy!!
Thank you for the course video. Very beautifully explained Saas and its practical application
The address icon doesn't load. Should be: " Address " in html files. And instead of adding and removing "open" class you can simply toggle it in one function. Very good video!
it is marker-alt not map-marker alt
Thank you so much for your videos; these are quite helpful for the beginners as well as experienced learners!!!
how actual this tutorial for end of 2022?
Thank you, sir, and freeCodeCamp for giving us such free and brilliant content.
Done with the tutorial! Really good one! Thanks!
Thank you for this course! very well-instructed!
great tutorial...definitely worth the time and very beginner friendly
Thanks Beau, very informative. Unlike the competetors teaching sass you get to the fundamentals that assist beginners in the early stages of development. Cheers :)
you sir ARE A LIFE SAVER! Very informative THANKS!!!
oh its 2 hours long video, but when you actually code along it becomes 5 hours + video..
5 beautiful hours
😂
a day's work that is fair enough right
yes, absolutely.
try running at the speed 1.25 or greater as per your comfort. 1.25 worked for me :)
the whole day have been watching different video about sass and coundlnt understand until i got to find this one
Great course so far. I have decided to learn JS, then come back and finish the course. Struggled with the JS part a bit
This was a really good SASS tutorial. Thank you!
Wooo, just finished the whole 2 hours, yay! Looks amazing and learnt a lot! Thanks @codeSTACKr
Best SASS tutorial!!!
Better than the 455 INR Udemy Course
i noticed in the tutorial for sass in the Front End Development Libraries section that there was no mention that sass has two syntax's "an original .sass and the more popular .scss that can be used with plain css" this led to confusion at first when attempting to configure a codepen after learning through FCC alone that led to me digging and finding this video that clearly states there is indeed two syntax's. i was just wondering why this information wasn't added to the courses as well.
Thanks for the video!
If you have a problem with changing the path of the "savePath" name, then just make sure you are changing the exact Live Sass Compiler settings .json file.
Because there is more than one .json file and you might select not the right one.
And, yes, I made this mistake as well...
Such a great SASS course. I have learnt a lot of things from this video, Thank you.
Greate video for a sass beginner ! Thanks a lot!
Thank you so much!! Great tutorial!! :) And well explained!
this is just a reminder that I watched the video till the end . FINISHED it was brilliant though.
dude u are the champ omfg i will shine XDD thanks mate
Thank you @freeCodeCamp and @codeSTACKr !
very good video..please make a advanced tutorial sequel of this current tutorial. we would love to learn from you rather anywhere else..
Nice tutorial, thanks FCC and codeSTACKr
I just started learing Sass and i found this tutorial. Cant be better
Add fa-map-marker instead of fa-marker-alt for the Location Icon to appear.
Thank you so much for this video.. it is indeed impactful
Needed to be brought up to scss speed and FCC came in right on time for the win!
THANK YOU SO MUCH! VERY WELL EXPLAINED TURTORIAL., 10/10!!!
liked and subscribed :)
nice tutorial! would like to see another tutorial that utilises the sass 7-1 architecture, since i feel like that's a good way to organise code
Great tutorial. You are my inspiration.
perfect ... thank you so much for this !
... the fact is, that all the time we save when we start using tools like sass, whilst we are developping our code, we are going to lose it when it will be the time to decode another people project. Anyway really good video.
best tutorial so far.
Oh come on, I want that data structures video which was posted just now back to public please! I'm so in need of it!
Yes😖😖😖😖😖
An amazing tutorial. Thank you for it! I don't know where to use all these knowledge, especially functions because it makes the whole thing a little bit crabbed and huge while the problem small is. But may be I'll grow up to that one day. :D
Thank you so much!It was really helpful video..
Thanks!