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 - Master Sass 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!

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