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 se...
A couple of other very useful VS Code...
CSS output style options
What are source maps?
Other command line alternatives (free...
Sass vs SCSS - two different ways of ...
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 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 yo...
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 a...
Mixin arguments part three: more ways...
Mixin arguments part four - keeping t...
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 - pa...
Mixin challenge - part one.mp4
mixin challenge handout.pdf
Mixin challenge - part two.mp4
A look at @content
Using @content to make awesome media ...
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 @m...
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 followin...
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 m...
Improving our media query mixin with ...
Maps and `@each`
Accessing maps with `@each` challenge
Accessing maps with `@each` solution
map-has-key()
A more realistic example of map-has-k...
Improving our media query mixin with map-has-key()
Improving our media query mixin - cha...
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...
And making it even better!
type-of-challenge.zip
Partials and file organization
Introduction to partials
Order matters when importing your par...
The 7-1 system and what I actually us...
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 t...
Creating an underline pseudo element ...
Styling the facts and meals sections
Styling the testimonial and footer, a...
Adding in a media query mixin
About section - large screen layout w...
Creating a grid mixin
Fixing up the nav and about section
Fixing up the typography + closing th...
5-page travel blog with Sass and CSS Grid
Coming soon
Project overview
Closing thoughts
I hope you enjoyed the course, plus a...
Future Updates
Products
Course
Section
Lesson
A couple of other very useful VS Code Extensions
A couple of other very useful VS Code Extensions
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 se...
A couple of other very useful VS Code...
CSS output style options
What are source maps?
Other command line alternatives (free...
Sass vs SCSS - two different ways of ...
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 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 yo...
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 a...
Mixin arguments part three: more ways...
Mixin arguments part four - keeping t...
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 - pa...
Mixin challenge - part one.mp4
mixin challenge handout.pdf
Mixin challenge - part two.mp4
A look at @content
Using @content to make awesome media ...
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 @m...
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 followin...
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 m...
Improving our media query mixin with ...
Maps and `@each`
Accessing maps with `@each` challenge
Accessing maps with `@each` solution
map-has-key()
A more realistic example of map-has-k...
Improving our media query mixin with map-has-key()
Improving our media query mixin - cha...
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...
And making it even better!
type-of-challenge.zip
Partials and file organization
Introduction to partials
Order matters when importing your par...
The 7-1 system and what I actually us...
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 t...
Creating an underline pseudo element ...
Styling the facts and meals sections
Styling the testimonial and footer, a...
Adding in a media query mixin
About section - large screen layout w...
Creating a grid mixin
Fixing up the nav and about section
Fixing up the typography + closing th...
5-page travel blog with Sass and CSS Grid
Coming soon
Project overview
Closing thoughts
I hope you enjoyed the course, plus a...
Future Updates
In this video, I look at one very useful VS Code extension, and one which you'll need if you want to write Sass using the indented syntax (which I'll be talking more about in a few videos).