Sass Tutorial for Beginners - CSS With Superpowers
HTML-код
- Опубликовано: 1 июл 2024
- In this course, you will learn the basics of Sass. We will start with a brief overview of what Sass is along with what is required to incorporate Sass into your environment. We will also set up a Sass compiler in Visual Studio Code. You will learn about Sass variables, maps, nesting, functions, mixins, extending, and operations.
Lastly, we will start from scratch on a real-world project (Portfolio website) using Sass. We will go step-by-step through each part, and at the end, we will deploy the site.
🔗 Project Code: github.com/codeSTACKr/portfol...
🎥 Tutorial from codeSTACKr. Check out their RUclips Channel: / codestackr
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:00:58) What Is Sass?
⌨️ (0:01:24) Requirements
⌨️ (0:02:15) Install/Setup Live Sass Compiler VS Code Extension
⌨️ (0:04:02) Folder Structure / Sass Syntax
⌨️ (0:08:06) Variables
⌨️ (0:10:03) Maps
⌨️ (0:03:00) Nesting
⌨️ (0:16:54) Partials
⌨️ (0:19:40) Functions
⌨️ (0:21:30) Mixin Example 1
⌨️ (0:24:26) Mixin Example 2
⌨️ (0:28:00) Mixin Example 3
⌨️ (0:30:20) Extend
⌨️ (0:32:05) Math Operations
⌨️ (0:33:49) How to Learn More (Documentation)
⌨️ (0:34:02) Real-World Example From Scratch (Portfolio Site)
⌨️ (0:34:38) index.html
⌨️ (0:40:35) Font Awesome Setup
⌨️ (0:41:29) main.scss / _config.scss
⌨️ (0:48:18) _home.scss
⌨️ (0:52:55) Transition Ease Mixin
⌨️ (0:54:24) Text Color Function
⌨️ (0:57:10) _menu.scss
⌨️ (1:02:38) main.js
⌨️ (1:06:08) Menu cont.
⌨️ (1:19:38) about.html
⌨️ (1:23:51) _about.scss
⌨️ (1:30:37) projects.html
⌨️ (1:35:05) _projects.scss
⌨️ (1:43:57) contact.html
⌨️ (1:47:09) _contact.scss
⌨️ (1:49:56) _responsive.scss
⌨️ (2:01:35) Deploy on Github Pages
✔️ codeSTACKr on Twitter: / codestackr
✔️ codeSTACKr on Instagram: / codestackr
✔️ codeSTACKr website: codeSTACKr.com
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: medium.freecodecamp.org
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
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
Sass literally has everything that I wanted to do in CSS, like nesting properties inside of other properties. Thanks for the tutorial btw👍
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!
Such a great and understandable course!!! This helped me fully understand Sass. Thanks guys!
Have watched the other SASS tuts. This one is the benchmark. But so grateful to all who give their time and knowledge thank you
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
めちゃお世話になりました！
英語もSASSも学べて非常に有意義な動画でした！！
ありがとうございます！！
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!
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.
Bless you guys.
In the name of open source
Awesome: simple, direct, exaustive, no useless discussion. Really a great job! Thanks
Thank you for putting your time and effort into this tutorial, it was really helpful to me
24 minutes in and I can't believe I waited so long to learn this. Subscribed.
What an absolutely rocking video. Incredible content, and an exceptional teacher as well. Very lucid and expressive.
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
'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?
Great course. Coded along for a few hours. Thanks!
By far the best tutorial video I have seen on RUclips, thanks a lot!
Sass is the best and most powerful CSS preprocessor card-body and card-head
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!
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
Best SCSS tutorial I've seen so far - Thank you
great tutorial man, really appreciated how you constantly reinforced ideas introduced earlier in the tutorial
Thanks! that is just utterly easy to understand! I enjoyed every minute of your video!
OMG,I just yesterday tried to find any video about sass. And now it's here....Thnx
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 !!
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 !
Done with the tutorial! Really good one! Thanks!
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 🤪
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..😍😍😍
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 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 !!!
Its a beautiful way of explaining the SASS concepts. Thanks a lot!!
Dude didn't even Google once even for color picks. Man that's mastery of content, calm and process flow truly a professional.
This is the recording dude ...Actually he cut the unnecessary Clips
Dude they had already built these projects and they just copy from another pc or screen and type in again.
Dude...no wait people before me already have said the stuff I'm about to say lol
Dude
Dude, people be so dumb that they simply cannot revel in somebody's appreciation and leave it to be.
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.
this was awesome. thanks for such clear concepts!
Great tutorial, clear explanation, thanks a lot man!!
This was a really good SASS tutorial. Thank you!
정말 고맙습니다 codeSTACKr!
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);
}
}
}
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.
Thank you for this course! very well-instructed!
great tutorial...definitely worth the time and very beginner friendly
you sir ARE A LIFE SAVER! Very informative THANKS!!!
Thank you so much!! Great tutorial!! :) And well explained!
Free code camp is just the best place for a new comer to learn code.
Great Tutorial. Thank you!
I really loved this tutorial, thank you so much, it helped me a lot
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.
Your all tutorial was awesome. This Sass tutorial was so easy. Thanks for giving such a simple way. It was very helpful
Thanks for explaining it so well !
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
Great, after this video and some note-taking, we can add SCSS to our skills in CV.
Thank you so much, it is really, really helpful
nice work with the burger/cross menu transitions
Really helpful SASS tutorial. Thanks
Awesome tutorial, thank you!
Thank you so much. This is a really useful post !!!
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 just started learing Sass and i found this tutorial. Cant be better
Thank you, sir, and freeCodeCamp for giving us such free and brilliant content.
Thank you @freeCodeCamp and @codeSTACKr !
Thank you for the course video. Very beautifully explained Saas and its practical application
Great, accurate explanation. Thanks
Greate video for a sass beginner ! Thanks a lot!
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
This is incredibly useful!
Really well done! Thanks bro!
this guy is ammazing, thank you for this amazing content
best tutorial so far.
Nice tutorial, thanks FCC and codeSTACKr
This was awesome. TYSM! ♥
this was a really nice crash course !
thanks
Thx, great tutorial!!!. You have a new subscriber in your channel
Great vídeo!!! Thank you!
Great tutorial. You are my inspiration.
perfect ... thank you so much for this !
Amazing Video! Thanks a lot!
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!
Wonderful tutorial , cheers :)
Amazing tutorial!!!
Such a great SASS course. I have learnt a lot of things from this video, Thank you.
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...
Wooo, just finished the whole 2 hours, yay! Looks amazing and learnt a lot! Thanks @codeSTACKr
thanx a lot! a very helpful course!
Thank you so much for this video.. it is indeed impactful
Amazing Tutorial..Thank YOU Sir
Thank you so much for this!
it was awesome :). thanks
Great tutorial, very helpful.
Needed to be brought up to scss speed and FCC came in right on time for the win!
Thanks a lot man, very good explications
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 u sir
Really needed this guidance 🙏🏻
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
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"
Thank you very much for this tutorial, it is very helpful