Sass Tutorial for Beginners – CSS With Superpowers



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

This Post Has 32 Comments

  1. shokin touch

    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.

  2. Pfig

    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.

  3. Chris Walker

    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.

  4. Isulf

    What the hell happened at 37:30? all the <li> tags suddenly disappeared!

  5. Isulf

    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

  6. Ajay Rathod

    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)

  7. steve Ela

    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 ?

  8. Inna Bulatova

    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

  9. Webtricker

    Your all tutorial was awesome. This Sass tutorial was so easy. Thanks for giving such a simple way. It was very helpful

  10. Remy LeBeau

    Is this course outdated? It was uploaded 2 years ago.

  11. Dtawan Tawng

    One thing I find confusing as I work with scss is keeping track of and organizing the files.

  12. Asif Dawood

    Thank you for the course video. Very beautifully explained Saas and its practical application

  13. Chris Bennett

    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!!

  14. Francis Offiah

    Great course so far. I have decided to learn JS, then come back and finish the course. Struggled with the JS part a bit

  15. 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.

  16. Forthaven

    the extension does not produce CSS> it is broken. i have changed all the relevant JSON settings, its wathcing, no complied CSS!

  17. Marshal Olu

    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?

  18. Tayeb SOUINI

    Thank you very much for this tutorial, it is very helpful

  19. Mugiira Kimathi

    I don't know why my scss changes stopped being reflected on main.css after while. Where did I mess up?

  20. Cindr Mon

    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

Leave a Reply