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
Products
Course
Section
Lesson
Accessing maps with `@each` solution
Accessing maps with `@each` solution
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
Lesson unavailable
Please
login to your account
or
buy the course
.