Sass - from beginner to real world - Sass Essentials Edition

Work faster & smarter with Sass
Introduction
What is Sass anyway?
6 mins
What software do you need?
1 min
VS Code
The Community
6 mins
The Setup
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 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
nesting-challenge-starting-files.zip
87.1 KB
solution.scss
769 Bytes
Variables
What are variables?
4 mins
Variable inception (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
variable-challenge-solution.scss
1.17 KB
Operators
Introduction to Operators
5 mins
Operators - a use case
3 mins
Building out a pricing table
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
10.6 KB
Extends
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
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
Introduction to Functions
2 mins
Some of my favourite Sass functions
7 mins
Building an e-commerce card
card-starting-files.zip
313 KB
The Markup
6 mins
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
Partials and file organization
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
Closing thoughts
I hope you enjoyed the course, plus a few other things
Future Updates