Sass - from beginner to real world - Sass Essentials Edition
by
Kevin Powell
Login
Enrollment is closed
The Setup
A look at setting up everything we need to get started with Sass
The Setup
A note before we get started
Enrollment is closed
Installing Sass with Sass live compiler
4 mins
Preview
Sass compilers for other text editors
Enrollment is closed
Using Sass live compiler and live server
2 mins
Preview
Sass live compiler and live server settings
4 mins
Preview
A couple of other very useful VS Code Extensions
2 mins
Preview
CSS output style options
4 mins
Enrollment is closed
What are source maps?
3 mins
Enrollment is closed
Other command line alternatives (free and premium options)
2 mins
Enrollment is closed
Sass vs SCSS - two different ways of writting Sass
3 mins
Enrollment is closed
CSS vs Sass comments
2 mins
Enrollment is closed
Table of contents
Sass - from beginner to real world - Sass Essentials Edition
by
Kevin Powell
ui-24px-outline-1_lock
Introduction
Introduction
Draft
What is Sass anyway?
Draft
What is Sass anyway?
Draft
What software do you need?
Draft
What software do you need?
Draft
VS Code
Draft
VS Code
Draft
The Community
Draft
The Community
ui-24px-outline-1_lock
The Setup
The Setup
Draft
A note before we get started
Draft
A note before we get started
Draft
Installing Sass with Sass live compiler
Draft
Installing Sass with Sass live compiler
Draft
Sass compilers for other text editors
Draft
Sass compilers for other text editors
Draft
Using Sass live compiler and live server
Draft
Using Sass live compiler and live server
Draft
Sass live compiler and live server settings
Draft
Sass live compiler and live server settings
Draft
A couple of other very useful VS Code Extensions
Draft
A couple of other very useful VS Code Extensions
Draft
CSS output style options
Draft
CSS output style options
Draft
What are source maps?
Draft
What are source maps?
Draft
Other command line alternatives (free and premium options)
Draft
Other command line alternatives (free and premium options)
Draft
Sass vs SCSS - two different ways of writting Sass
Draft
Sass vs SCSS - two different ways of writting Sass
Draft
CSS vs Sass comments
Draft
CSS vs Sass comments
ui-24px-outline-1_lock
Nesting
Nesting
Draft
Nesting selectors
Draft
Nesting selectors
Draft
SCSS vs Sass nesting
Draft
SCSS vs Sass nesting
Draft
Nesting and the ampersand (&)
Draft
Nesting and the ampersand (&)
Draft
Nesting properties
Draft
Nesting properties
Draft
Time for a challenge!
Draft
Time for a challenge!
Draft
nesting-challenge-starting-files.zip
Draft
nesting-challenge-starting-files.zip
Draft
solution.scss
Draft
solution.scss
ui-24px-outline-1_lock
Variables
Variables
Draft
What are variables?
Draft
What are variables?
Draft
Variable inception (variables inside variables)
Draft
Variable inception (variables inside variables)
Draft
Variables and the cascade
Draft
Variables and the cascade
Draft
Naming variables
Draft
Naming variables
Draft
It's challenge time!
Draft
It's challenge time!
Draft
Variable Challenge Starting Files
Draft
Variable Challenge Starting Files
Draft
variable-challenge-solution.scss
Draft
variable-challenge-solution.scss
ui-24px-outline-1_lock
Operators
Operators
Draft
Introduction to Operators
Draft
Introduction to Operators
Draft
Operators - a use case
Draft
Operators - a use case
ui-24px-outline-1_lock
Building out a pricing table
Building out a pricing table
Draft
Pricing Table - Intro
Draft
Pricing Table - Intro
Draft
Pricing Table Starting Files
Draft
Pricing Table Starting Files
Draft
Google font @import
Draft
Google font @import
Draft
Writing the markup
Draft
Writing the markup
Draft
Setting up the variables
Draft
Setting up the variables
Draft
Styling it up
Draft
Styling it up
Draft
Pricing Table finished version
Draft
Pricing Table finished version
ui-24px-outline-1_lock
Extends
Extends
Draft
An introduction to Extends
Draft
An introduction to Extends
Draft
Placeholders
Draft
Placeholders
Draft
Don't forget about the other stuff you can do
Draft
Don't forget about the other stuff you can do
Draft
Problems with extends - 1
Draft
Problems with extends - 1
Draft
Problems with extends - 2
Draft
Problems with extends - 2
ui-24px-outline-1_lock
Mixins basics
Mixins basics
Draft
Introduction to Mixins
Draft
Introduction to Mixins
Draft
Selectors inside mixins
Draft
Selectors inside mixins
Draft
Mixin arguments - part one
Draft
Mixin arguments - part one
Draft
Mixin arguments part two - optional arguments
Draft
Mixin arguments part two - optional arguments
Draft
Mixin arguments part three - more ways to work faster
Draft
Mixin arguments part three - more ways to work faster
Draft
Mixin arguments part four - keeping things in the right order
Draft
Mixin arguments part four - keeping things in the right order
Draft
Mixin Challenge - Introduction
Draft
Mixin Challenge - Introduction
Draft
LearnSass - mixin challenge.pdf
Draft
LearnSass - mixin challenge.pdf
Draft
Mixin Challenge - Starting Files
Draft
Mixin Challenge - Starting Files
ui-24px-outline-1_lock
Introduction to functions
Introduction to functions
Draft
Introduction to Functions
Draft
Introduction to Functions
Draft
Some of my favourite Sass functions
Draft
Some of my favourite Sass functions
ui-24px-outline-1_lock
Building an e-commerce card
Building an e-commerce card
Draft
card-starting-files.zip
Draft
card-starting-files.zip
Draft
The Markup
Draft
The Markup
Draft
Getting Sass set up and running
Draft
Getting Sass set up and running
Draft
Settin' up the variables
Draft
Settin' up the variables
Draft
Creating the mixins
Draft
Creating the mixins
Draft
Styling the typography
Draft
Styling the typography
Draft
Styling the buttons
Draft
Styling the buttons
Draft
Finishing touches
Draft
Finishing touches
Draft
my-finished-files.zip
Draft
my-finished-files.zip
ui-24px-outline-1_lock
Partials and file organization
Partials and file organization
Draft
Quick note
Draft
Quick note
Draft
Introduction to partials
Draft
Introduction to partials
Draft
Order matters when importing your partials
Draft
Order matters when importing your partials
Draft
The 7-1 system and what I actually use (file organization)
Draft
The 7-1 system and what I actually use (file organization)
ui-24px-outline-1_lock
Closing thoughts
Closing thoughts
Draft
I hope you enjoyed the course, plus a few other things
Draft
I hope you enjoyed the course, plus a few other things
Draft
Future Updates
Draft
Future Updates
Welcome!
Enter your info below to login.
Your email
Your password
Login
Forgot your password?