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

variable-challenge-solution.scss

Lesson unavailable

Please login to your account or buy the course.