Nesting selectors

Nesting selectors

Nesting selectors

One of the awesome features of Sass is being able to nest your selectors. It's also a really dangerous one as it can lead to some really messy CSS, so we do have to be careful. This opens the doors to some really awesome stuff though!

Sass - from beginner to real world - Sass Essentials Edition

Buy nowLearn 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