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: https://github.com/codeSTACKr/portfolio-sass
🎥 Tutorial from codeSTACKr. Check out their YouTube Channel: https://www.youtube.com/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: https://twitter.com/codeSTACKr
✔️ codeSTACKr on Instagram: https://instagram.com/codeSTACKr
✔️ codeSTACKr website: http://codeSTACKr.com
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://medium.freecodecamp.org
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
source
Thanks Beau and freeCodeCamp.org !!
▶️ Check out my channel for more: youtube.com/codeSTACKr
I am watching this and I didn't watch whole of this video but until where I watched it wasn't good. how he teaches , detail of the unrelated properties to sass distracted me from main content ( I have the prerequisites). and worse he used media query without explain about it. maybe I will continue rest of the video tomorrow.
probably a silly question: how did the nav menu default to a horizonal list with one bullet point? mine is a vertical list with every link as a separate bullet point. it throws off the rest of the menu styling, especially when you get to the burger.
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.
What the hell happened at 37:30? all the <li> tags suddenly disappeared!
Ok, let's be clear: i have no idea who say this is is useful. I've seen various times during the tutorial that you just edited out important syntax error corrections (or used some kind of unexplained extension that does automatically). It happens in a blink of an eye, i got it after DAYS of rewatching the same 5 minutes over and over..
One of those is at 37:30 where the <li> tags disappears, another that completely drived me crazy is at 1:12:53, that little dot that magically appeared when you saved your code.
This is really unfair, expecially to beginners like me, you wasted my time, and I'm writing this in hope that you know i disliked the video and messed up with the algorithm, hoping this will stress you the same way your poor tutorial stressed me
thanks
i m facing one problem, when i use sass complier it is not leaving space in tag which is nested in sass, for example header{ color: red; &h1{ color: blue}} and i get headerh1 (no space between header and h1)
in 1:00:00 of the video ,when you use a pseudo element u repeat your self and that is not pure,
and we are using sass so why not make it simple with (mixin) so will be like that,
in _config.scss file we add
@mixin menuBar($width) {
content: '';
position: absolute;
width: $width;
height: 3px;
background: set-text-color($primary-clr);
@include transition-ease;
}
and in _menu.scss file add
&::before
{
@include menuBar(28px);
top: -8px;
}
&::after
{
@include menuBar(20px);
bottom: -8px;
}
its that not right ?
Thank you it was very helpful 🙂
excelente!!!
At 44:08 , I don't understand how is that your header links (home, about, contact, projects) are displayed in one line. Isn't it a regular ul element with 4 li elements, aren't they supposed to show up one below another? each wth its own dot in front?
I am trying to type along – but I get different results on my machine
Your all tutorial was awesome. This Sass tutorial was so easy. Thanks for giving such a simple way. It was very helpful
wow awesome css code, i like it
Is this course outdated? It was uploaded 2 years ago.
Almost heard slim shady at 37:46 xD
This is incredibly useful!
Amazing Video! Thanks a lot!
One thing I find confusing as I work with scss is keeping track of and organizing the files.
thanks you sir a lot
Thank you for the course video. Very beautifully explained Saas and its practical application
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!!
nice
Hi, at 26:54, how could I change that value dynamically with a button click?
Great course so far. I have decided to learn JS, then come back and finish the course. Struggled with the JS part a bit
nice
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.
the extension does not produce CSS> it is broken. i have changed all the relevant JSON settings, its wathcing, no complied CSS!
Hi, so I'm just trying out sass for the first but I'm getting an error on the console saying "Refused to apply style from '…css/main.css' because its MIME type and is not a supported stylesheet MIME type, and strict MIME checking is enabled. Pls any idea on how to solve this problem?
Thank you very much for this tutorial, it is very helpful
I don't know why my scss changes stopped being reflected on main.css after while. Where did I mess up?
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