Sass - from beginner to real world - Master Sass Edition

Work faster & smarter with Sass
Introduction
An introduction to the course, including a brief introduction to Sass.
What is Sass anyway?
6 mins
What Software do you need?
1 min
VS Code
The Community
6 mins
The Setup
A look at setting up everything we need to get started with Sass
A note before we get started
Installing Sass with Sass live compiler
4 mins
Sass compilers for other text editors
Using Sass live compiler and live server
2 mins
Sass live compiler and live server settings
4 mins
A couple of other very useful VS Code Extensions
2 mins
CSS output style options
4 mins
What are source maps?
3 mins
Other command line alternatives (free and premium options)
2 mins
Sass vs SCSS - two different ways of writting Sass
3 mins
CSS vs Sass comments
2 mins
Nesting
Nesting is a key feature to Sass. It's really powerful, and often abused. Let's look at how to use it properly, and some of the really cool things ways you can nest within Sass
Nesting selectors
3 mins
SCSS vs Sass nesting
3 mins
Nesting and the ampersand (&)
8 mins
Nesting properties
3 mins
Time for a challenge!
2 mins
challenge_01-starting-files.zip
87.1 KB
solution.scss
769 Bytes
Variables
What are variables?
4 mins
Variable inseption (variables inside variables)
4 mins
Variables and the cascade
3 mins
Naming variables
5 mins
It's challenge time!
3 mins
Variable Challenge Starting Files
2.4 KB
solution.scss
1.17 KB
Operators
A cool way to do math in your CSS!
Introduction to Operators
5 mins
Operators - a use case
3 mins
Building out a pricing table
Okay, so we've learned a lot of new stuff, you've nailed a few challenges, now it's time to really step things up with a more realistic example of Sass in action.
Pricing Table - Intro
1 min
Pricing Table Starting Files
115 KB
Google font @import
Writing the markup
6 mins
Setting up the variables
11 mins
Styling it up
31 mins
pricing-table-finished-version.zip
10.6 KB
Extends
Extends are a controversial part of Sass, with a lot of people preferring not to use them, including myself. That said, they're a pretty neat feature, and if used properly, can be used well.
An introduction to Extends
4 mins
Placeholders
2 mins
Don't forget about the other stuff you can do
2 mins
Problems with extends - 1
2 mins
Problems with extends - 2
4 mins
Mixins basics
Mixins are one of the things that convinced me that Sass was worth learning. I saw some basic examples of them and was blown away. In this section, I'll introduce you to mixins, and we'll look at why they are so awesome.

Once I've shown you how they work, you'll get to see if you really understood with a challenge that should force you to think a little bit :). 
Introduction to Mixins
4 mins
Selectors inside mixins
4 mins
Mixin arguments - part one
3 mins
Mixin arguments part two - optional arguments
3 mins
Mixin arguments part three: more ways to work faster
4 mins
Mixin arguments part four - keeping things in the right order
3 mins
Mixin Challenge - Introduction
6 mins
LearnSass - mixin challenge.pdf
103 KB
Mixin Challenge - Starting Files
782 Bytes
Introduction to functions
Functions are an essential part of Sass. You don't realize it yet, but you've already been using them too!

As an introduction, we'll just look at what a function even is as well as a few of the functions that come packaged with Sass to get us started with them, and we'll revisit them later on once we've got into some of the more advanced concepts.
Introduction to Functions
2 mins
Some of my favourite Sass functions
7 mins
Building an e-commerce card
It's time to put everything we've learned so far together and build something! I'd suggest trying to build this all out on your own with the provided files, then seeing how I approach it, but there ain't no shame in just following along either!
The Markup
6 mins
card-starting-files.zip
313 KB
Getting Sass set up and running
3 mins
Settin' up the variables
5 mins
Creating the mixins
9 mins
Styling the typography
7 mins
Styling the buttons
6 mins
Finishing touches
8 mins
my-finished-files.zip
154 KB
Lists
Lists are an essential tool for some of the more advanced things we'll be looking at soon. They aren't complicated by any means, but they can be a little strange.
Introduction to Lists
1 min
List lengths
2 mins
The different types of lists
1 min
Accessing specific list items
1 min
The different ways to write lists
3 mins
Interpolation
Interpolation is all about using variables in places that they aren't really meant to be used, and while that might sound strange (and be really hard to pronounce), it's super-duper useful!
What is interpolation?
3 mins
Interpolation and math
1 min
Interpolation challenge.pdf
26.6 KB
More Mixins
Another look at mixins, and some even cooler and more powerful stuff that you can do with them!
A quick refresher on Mixins
4 mins
A look at variable arguments
4 mins
Staying organized with variables
2 mins
Variable arguments with @include
2 mins
Variable arguments with @include - part two
5 mins
Mixin challenge - part one.mp4
2 mins
mixin challenge handout.pdf
34.5 KB
Mixin challenge - part two.mp4
3 mins
A look at @content
5 mins
Using @content to make awesome media query mixins
4 mins
Adding a custom size media query
2 mins
@for
For loops are extremely powerful, and can be very useful. In this introduction to them, I look at a nice example of using them to create a grid system that you could use on a site, using only a few lines of SCSS to output a large amount of CSS. As we go through the different videos, I look at the basic function of a @for loop, and slowly make it better and better, adding in math and variables to really make things shine.
Intro to Sass @for
2 mins
Using the $i variable
1 min
Using interpolation
2 mins
Adding in some math
2 mins
A little more math and a new variable
2 mins
@for challenge
2 mins
@for challenge.pdf
35.2 KB
@each
Introduction to @each
2 mins
A more useful example of @each
1 min
Using nested lists
4 mins
Refactoring
4 mins
@if, @else, @if else and the if() function
Intro to the @if directive
4 mins
A more realistic example
3 mins
@else directive intro
1 min
A more realistic look at @else
3 mins
Using @if and @else to make a cool @mixin
4 mins
Improving the mixin
3 mins
Introduction to @if else
4 mins
The if() function
2 mins
Using the if function to write less code
3 mins
Creating your own functions
We've already seen, and used, a few of the functions which come built-in with Sass. They're useful, but sometimes you need to make something yourself. This section is an introduction on how to do just that.
Introduction to custom functions
4 mins
Variable number of arguments
3 mins
functions - starter file for following videos.zip
898 Bytes
Dynamically set text color
7 mins
Making the output look a little better
2 mins
Refactor challenge.mp4
2 mins
Refactor challenge - solution.mp4
4 mins
Warnings and Errors
We can add in our own warnings and errors to our mixins and functions.
Intro to debugging in Sass
1 min
The warning
4 mins
Creating an error
2 mins
Improving our error with interpolation
2 mins
Debug
4 mins
Maps
Maps are sort of like nested lists, but with key: value pairs. I avoided them for the longest time because they seemed overly complicated for things I could do with variables, but the more I learned about them, the more awesome I realized they are.
Introduction to Sass maps
4 mins
How to access maps
3 mins
Access maps made easier
5 mins
Mapception
3 mins
Accessing maps inside of other maps
2 mins
Accessing maps inside of other maps made easier (plus a mini challenge)
5 mins
Improving our media query mixin with a map
5 mins
Maps and `@each`
2 mins
Accessing maps with `@each` challenge
7 mins
Accessing maps with `@each` solution
5 mins
map-has-key()
3 mins
A more realistic example of map-has-key()
3 mins
Improving our media query mixin with map-has-key()
See if you can take what we've learned so far to improve our media query mixin
Improving our media query mixin - challenge
1 min
map-has-key-challenge.zip
773 Bytes
The solution
2 mins
Improving our media query mixin with type-of()
A look at the type-of() function
2 mins
Using type-of to improve our mq mixin even more! A challenge
3 mins
And making it even better!
4 mins
type-of-challenge.zip
978 Bytes
Partials and file organization
Partials are pretty much little Sass files. They allow us to break our code up into a more organized system, and then import all of the individual files into one file, which then gets compiled into our final CSS file.
Introduction to partials
5 mins
Order matters when importing your partials
4 mins
The 7-1 system and what I actually use (file organization)
10 mins
Building out a 1-page site
Putting everything that's been covered so far to use, it's time to build out a site.
Introduction to the project
2 mins
assets.zip
14.4 MB
A look at the files
3 mins
The Markup - Navigation
5 mins
The Markup - Home and About
6 mins
The Markup - Facts and Meals
5 mins
The Markup - Testimonial and Footer
5 mins
First variables and mixins
7 mins
Setting up a custom function
3 mins
Adding an error to the function
2 mins
Setting up the typography
9 mins
Setting up the general layout
4 mins
Styling the navigation
5 mins
Styling up the home section layout
4 mins
Stlying the About section, and some trouble shooting
5 mins
Creating an underline pseudo element mixin
6 mins
Styling the facts and meals sections
8 mins
Styling the testimonial and footer, and fixing a mistake
11 mins
Adding in a media query mixin
9 mins
About section - large screen layout with grid
9 mins
Creating a grid mixin
8 mins
Fixing up the nav and about section
3 mins
Fixing up the typography + closing thoughts
5 mins
5-page travel blog with Sass and CSS Grid
In this final section of the course, we're building out a 5-page site using what we've learned about Sass so far.

I strongly encourage you to check out the first few videos to see what we're dealing with, but then to try and tackle it on your own as a big final challenge.
Coming soon
Project overview
4 mins
Closing thoughts
I hope you enjoyed the course, plus a few other things
Future Updates