Sass - from beginner to real world - Master Sass Edition
- Buy now
- Learn more
Introduction

What is Sass anyway?
What Software do you need?
VS Code
The Community
The Setup

A note before we get started
Installing Sass with Sass live compiler
Sass compilers for other text editors
Using Sass live compiler and live server
Sass live compiler and live server settings
A couple of other very useful VS Code Extensions
CSS output style options
What are source maps?
Other command line alternatives (free and premium options)
Sass vs SCSS - two different ways of writting Sass
CSS vs Sass comments
Nesting

Nesting selectors
SCSS vs Sass nesting
Nesting and the ampersand (&)
Nesting properties
Time for a challenge!
challenge_01-starting-files.zip
solution.scss
Variables

What are variables?
Variable inseption (variables inside variables)
Variables and the cascade
Naming variables
It's challenge time!
Variable Challenge Starting Files
solution.scss
Operators

Introduction to Operators
Operators - a use case
Building out a pricing table

Pricing Table - Intro
Pricing Table Starting Files
Google font @import
Writing the markup
Setting up the variables
Styling it up
pricing-table-finished-version.zip
Extends

An introduction to Extends
Placeholders
Don't forget about the other stuff you can do
Problems with extends - 1
Problems with extends - 2
Mixins basics

Introduction to Mixins
Selectors inside mixins
Mixin arguments - part one
Mixin arguments part two - optional arguments
Mixin arguments part three: more ways to work faster
Mixin arguments part four - keeping things in the right order
Mixin Challenge - Introduction
LearnSass - mixin challenge.pdf
Mixin Challenge - Starting Files
Introduction to functions

Introduction to Functions
Some of my favourite Sass functions
Building an e-commerce card

The Markup
card-starting-files.zip
Getting Sass set up and running
Settin' up the variables
Creating the mixins
Styling the typography
Styling the buttons
Finishing touches
my-finished-files.zip
Lists

Introduction to Lists
List lengths
The different types of lists
Accessing specific list items
The different ways to write lists
Interpolation

What is interpolation?
Interpolation and math
Interpolation challenge.pdf
More Mixins

A quick refresher on Mixins
A look at variable arguments
Staying organized with variables
Variable arguments with @include
Variable arguments with @include - part two
Mixin challenge - part one.mp4
mixin challenge handout.pdf
Mixin challenge - part two.mp4
A look at @content
Using @content to make awesome media query mixins
Adding a custom size media query
@for

Intro to Sass @for
Using the $i variable
Using interpolation
Adding in some math
A little more math and a new variable
@for challenge
@for challenge.pdf
@each

Introduction to @each
A more useful example of @each
Using nested lists
Refactoring
@if, @else, @if else and the if() function

Intro to the @if directive
A more realistic example
@else directive intro
A more realistic look at @else
Using @if and @else to make a cool @mixin
Improving the mixin
Introduction to @if else
The if() function
Using the if function to write less code
Creating your own functions

Introduction to custom functions
Variable number of arguments
functions - starter file for following videos.zip
Dynamically set text color
Making the output look a little better
Refactor challenge.mp4
Refactor challenge - solution.mp4
Warnings and Errors

Intro to debugging in Sass
The warning
Creating an error
Improving our error with interpolation
Debug
Maps

Introduction to Sass maps
How to access maps
Access maps made easier
Mapception
Accessing maps inside of other maps
Accessing maps inside of other maps made easier (plus a mini challenge)
Improving our media query mixin with a map
Maps and `@each`
Accessing maps with `@each` challenge
Accessing maps with `@each` solution
map-has-key()
A more realistic example of map-has-key()
Improving our media query mixin with map-has-key()

Improving our media query mixin - challenge
map-has-key-challenge.zip
The solution
Improving our media query mixin with type-of()

A look at the type-of() function
Using type-of to improve our mq mixin even more! A challenge
And making it even better!
type-of-challenge.zip
Partials and file organization

Introduction to partials
Order matters when importing your partials
The 7-1 system and what I actually use (file organization)
Building out a 1-page site

Introduction to the project
assets.zip
A look at the files
The Markup - Navigation
The Markup - Home and About
The Markup - Facts and Meals
The Markup - Testimonial and Footer
First variables and mixins
Setting up a custom function
Adding an error to the function
Setting up the typography
Setting up the general layout
Styling the navigation
Styling up the home section layout
Stlying the About section, and some trouble shooting
Creating an underline pseudo element mixin
Styling the facts and meals sections
Styling the testimonial and footer, and fixing a mistake
Adding in a media query mixin
About section - large screen layout with grid
Creating a grid mixin
Fixing up the nav and about section
Fixing up the typography + closing thoughts
5-page travel blog with Sass and CSS Grid

Coming soon
Project overview
Closing thoughts

I hope you enjoyed the course, plus a few other things
Future Updates

Sass live compiler and live server settings

By default Live Sass Compiler generates a CSS file in the same location as our Sass files, which isn't ideal. In this video, I show how we can change that, and also how you can change the browser that Live Server uses by default.