Preview unavailable

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