What Software do you need?

What Software do you need?

I'll be using VS Code, and encourage you to do the same, though you can use any code editor that you want

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