Learn Sass (early access) by Kevin Powell

Learn Sass (early access)

Work faster & smarter with Sass

Overview

Sass has become an essential language to learn for front-end developers. It helps you write your code faster, pull off things that sometimes seem like magic, and it’s also a part of many modern workflows.

This course is going to teach you how to use Sass, how to integrate it into your workflow and push you with challenges, helping you become a better front-end developer.

Early access!

Get early access to the course (as well as ALL future updates). Act fast though, the doors for early access close June 18th. The course will open again at the end of this summer, but at that point it will cost $120.

This course is about more than just Sass

This course also doesn’t solely focus on Sass as a language. Understanding the language itself is important, but it presents us with an opportunity to change how we work on our projects. This course teaches you not only the language of Sass but examines how to use it in the real world as well.

It also dives into intermediate and advanced level CSS. Sass is, at the end of the day, a fancy way to write CSS after all. So how could we learn Sass really well if we don’t also get into some higher level CSS stuff along the way?

We’ll look at putting together a full, multi-page website, where I’ll examine file structure and general workflow concepts, as well as get into class naming conventions for our CSS, and more, along the way.

This course isn’t just about learning how to use Sass, it’s about learning how to be a better front-end developer.

Where the course is now

Because the course is in early access, not all the content is ready yet. What you'll be getting when you buy the course now is:
  • What is Sass and why should I care?
  • How to install Sass
  • Sass comments vs CSS comments
  • SCSS / Sass
  • Nesting
  • Variables
  • Operators
  • Extends
  • Mixin basics
  • Introduction to Functions
  • Lists
  • Interpolation
  • More mixins
  • Control directives (@for, @each, @if)
  • Maps
  • Building out 2 components
  • Multiple challenges
  • Lifetime access to the the community (a $60/year value)

Where course is headed

Once all is said and done, this is what you'll have access to once everything is done. 
  • Creating functions
  • Troubleshooting
  • File structure
  • Naming conventions
  • Setting up a workflow 
  • Building out a full multi-page website
  • Probably some more stuff I haven’t thought of yet

And remember, by getting in now, you're getting all this content as it's released at no extra cost. Once the doors close on June 18th, they won't open for a long time. And when they do, the price is going up.

The community

By purchasing this course, you'll get lifetime-access to my YouTube community, which is normally $60/year. This is a private Discord channel where like-minded people can chat, ask questions and network, as well as just hang out. It has text, audio and video chat, including screen sharing which can be very useful for trouble shooting problems that you may be having. You'll also have access to a Learn Sass channel inside the community, only for members of the course.

What's included?

Video Icon 106 videos File Icon 11 files Text Icon 2 text files

Contents

Introduction
What is this course about?
1 min
What is Sass anyway?
6 mins
What software do you need?
1 min
The Setup
A note on Dart Sass
Installing ruby (Windows users only)
2 mins
Installing Sass
3 mins
Watching folders to compile Sass to CSS
4 mins
Output style options
4 mins
What are source maps?
3 mins
Command line alternatives (free and premium options)
2 mins
Sass vs SCSS - two different ways of writting Sass
3 mins
CSS vs Sass comments
2 mins
Nesting
Nesting selectors
3 mins
SCSS vs Sass nesting
3 mins
Nesting and the ampersand (&)
8 mins
Nesting properties
3 mins
Time for a challenge!
2 mins
challenge_01-starting-files.zip
87.1 KB
Variables
What are variables?
4 mins
Variable inseption (variables inside variables)
4 mins
Variables and the cascade
3 mins
Naming variables
5 mins
It's challenge time!
3 mins
challenge_02-starting-files.zip
2.4 KB
Operators
Introduction to Operators
5 mins
Operators - a use case
3 mins
Building out a pricing table
Pricing Table - Intro
1 min
pricing-grid-files.zip
115 KB
Google font @import
Writing the markup
6 mins
Setting up the variables
11 mins
Styling it up
31 mins
Extends
An introduction to Extends
4 mins
Placeholders
2 mins
Don't forget about the other stuff you can do
2 mins
Problems with extends - 1
2 mins
Problems with extends - 2
4 mins
Mixins basics
Introduction to Mixins
4 mins
Selectors inside mixins
4 mins
Mixin arguments part one
3 mins
Mixin arguments part two: optional arguments
3 mins
Mixin arguments part three: more ways to work faster
4 mins
Mixin arguments part four: keeping things in the right order
3 mins
Mixin Challenge - Introduction
6 mins
LearnSass - mixin challenge.pdf
103 KB
mixin-challenge.zip
781 Bytes
Introduction to functions
Introduction to Functions
2 mins
Some of my favourite Sass functions
7 mins
Building an e-commerce card
card-starting-files.zip
2.46 MB
The Markup
6 mins
Getting Sass set up and running
3 mins
Settin' up the variables
5 mins
Creating the mixins
9 mins
Styling the typography
7 mins
Styling the buttons
6 mins
Finishing touches
8 mins
my-finished-files.zip
154 KB
Lists
Introduction to Lists
1 min
List lengths
2 mins
The different types of lists
1 min
Accessing specific list items
1 min
The different ways to write lists
3 mins
Interpolation
What is interpolation?
3 mins
Interpolation and math
1 min
Interpolation challenge.pdf
26.6 KB
More Mixins
A quick refresher on Mixins
4 mins
A look at variable arguments
4 mins
Staying organized with variables
2 mins
Variable arguments with @include
2 mins
Variable arguments with @include - part two
5 mins
Mixin challenge - part one.mp4
2 mins
mixin challenge handout.pdf
34.5 KB
Mixin challenge - part two.mp4
3 mins
A look at @content
5 mins
Using @content to make awesome media query mixins
4 mins
Adding a custom size media query
2 mins
@for
Intro to Sass @for
2 mins
Using the $i variable
1 min
Using interpolation
2 mins
Adding in some math
2 mins
A little more math and a new variable
2 mins
@for challenge
2 mins
@for challenge.pdf
35.2 KB
@each
Introduction to @each
2 mins
A more useful example of @each
1 min
Using nested lists
4 mins
Refactoring
4 mins
@if, @else, @if else and the if() function
Intro to the @if directive
4 mins
A more realistic example
3 mins
@else directive intro
1 min
A more realistic look at @else
3 mins
Using @if and @else to make a cool @mixin
4 mins
Improving the mixin
3 mins
Introduction to @if else
4 mins
The if() function
2 mins
Using the if function to write less code
3 mins
Creating your own functions
Introduction to custom functions
4 mins
Variable number of arguments
3 mins
functions - starter file for following videos.zip
898 Bytes
Dynamically set text color
7 mins
Making the output look a little better
2 mins
Refactor challenge.mp4
2 mins
Refactor challenge - solution.mp4
4 mins
Maps
01 - maps intro.mp4
4 mins
02 - accessing maps.mp4
3 mins
03 - accesing maps made easier-.mp4
5 mins
04 - mapception.mp4
3 mins
05 accessing nested maps.mp4
2 mins
06 making it easier and a mini challenge.mp4
5 mins
07 improving our media query mixin with a map.mp4
5 mins
08 - maps and each loop.mp4
2 mins
09 accessing maps with each with a challenge.mp4
7 mins
10 accessing maps with each solution.mp4
5 mins
11 - map-has-key().mp4
3 mins
12 - map-has-key cont.mp4
4 mins
13 - making our media query mixin better challenge.mp4
1 min
14 - solution.mp4
2 mins
15 - type-of.mp4
2 mins
16 - type-of challenge.mp4
2 mins

FAQs

Do I need any experience with Sass before starting this course?

No! This course is designed assuming you have never used it before.

I've been using Sass for awhile now, is it worth it for me to take this course?

It really depends on how advanced you are. If you are already using Sass, you can probably skip some of the early content, but still get a lot of value from the later chapters. If ever you feel like it isn't bringing you enough value, there is a 30-day, no questions asked, money back guarantee!

There are other Sass courses out there, why should I pick this one?

Many of the courses out there simple look at all the Sass functionality, and skip over implementing it in real projects, or they fail to really dive deep into some of the more useful features of Sass. In this course, I not only look at how Sass works, but I look at how it works in a modern workflow, how it can help you work faster and smarter, and look at real-world projects along the way as well.

How long will it take me to complete this course?

That's really up to you! You can work through the content at your own pace, go back over lessons, or speed through it. You have access to the course forever!

What if I decide this course isn't for me?

It happens, so you've got nothing to worry about. Get in touch with me within 30 days, and I'll gladly issue you a full refund!

Take your front-end skills to the next level

Do you want to learn how to make some kick-ass websites? Between teaching in a physical classroom, my YouTube channel, and the premium courses available here, I teach people how to make the web, and how to make it look good while they are at it.