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.

⭐️ 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:40:35) Font Awesome Setup
⌨️ (0:52:55) Transition Ease Mixin
⌨️ (0:54:24) Text Color Function
⌨️ (1:06:08) Menu cont.
⌨️ (2:01:35) Deploy on Github Pages

--

[kenthefley]

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;

[betfab]

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

[mudyeet_]

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 :)

[filcondrat]

've been using scss for years, didn't know half of features until this tut

[codeanything]

Sass literally has everything that I wanted to do in CSS, like nesting properties inside of other properties. Thanks for the tutorial btw👍

[cswalker]

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.

[ProgrammingwithPeter]

Sass is the best and most powerful CSS preprocessor <3 But i found that nesting too much might hurt you, so use the nesting if only it makes sense to be always there.Something like cards > card-body and card-head

[Dexterx]

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

[danielnowak]

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.

[phoenixocean]

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"

[levithon]

Wow, one of my 2 requests has been met. Now I only wish for a nice Typescript tutorial. Great job guys!

[justinobrien]

24 minutes in and I can't believe I waited so long to learn this. Subscribed.

[TheOshinoMeme]

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 !

[leeeric]

In the example that the Youtuber showed in the latter section, the part "home, projects, contact me" is shown in row, not column @41:30，it is because the Youtuber have erased the <li> tags and <ul> tags.

[jenniferward]

Have watched the other SASS tuts. This one is the benchmark. But so grateful to all who give their time and knowledge thank you

[houmei]

めちゃお世話になりました！
英語もSASSも学べて非常に有意義な動画でした！！
ありがとうございます！！

[jonathanacevedo]

Bless you guys.
In the name of open source

[harshittiwary]

Free code camp is just the best place for a new comer to learn code.

[fabrizioiacovone]

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

[oldmangames]

Such a great and understandable course!!! This helped me fully understand Sass. Thanks guys!