A note before we get started
A note before we get started
Sass - from beginner to real world - Sass Essentials 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!
nesting-challenge-starting-files.zip
solution.scss
Variables
What are variables?
Variable inception (variables inside variables)
Variables and the cascade
Naming variables
It's challenge time!
Variable Challenge Starting Files
variable-challenge-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
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
card-starting-files.zip
The Markup
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
Partials and file organization
Quick note
Introduction to partials
Order matters when importing your partials
The 7-1 system and what I actually use (file organization)
Closing thoughts
I hope you enjoyed the course, plus a few other things
Future Updates
Preview unavailable
You must log in or sign up to view this lesson.
Login
Sign up
Sass - from beginner to real world - Sass Essentials 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!
nesting-challenge-starting-files.zip
solution.scss
Variables
What are variables?
Variable inception (variables inside variables)
Variables and the cascade
Naming variables
It's challenge time!
Variable Challenge Starting Files
variable-challenge-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
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
card-starting-files.zip
The Markup
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
Partials and file organization
Quick note
Introduction to partials
Order matters when importing your partials
The 7-1 system and what I actually use (file organization)
Closing thoughts
I hope you enjoyed the course, plus a few other things
Future Updates