Sass - from beginner to real world - Master Sass 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
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
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.zip
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
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
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
What is interpolation?
3 mins
Interpolation and math
1 min
Interpolation challenge.pdf
26.6 KB
More Mixins
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
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
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
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
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()
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
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
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
Coming soon
Project overview
4 mins
Closing thoughts
I hope you enjoyed the course, plus a few other things
Future Updates