Kevin Powell /Sass - from beginner to real world - Master Sass Edition

  • $120 or 3 monthly payments of $40

Sass - from beginner to real world - Master Sass Edition

  • Closed

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.

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.

Who this course is for

  • People who know HTML & CSS and are ready to take the next step
  • People who have started using Sass, but want to raise their game to the next level with a deeper understanding of how it works and how it fits into a modern workflow

The lessons in Learn Sass made my workflow so much simpler. I am not just learning theory, I am learning practical things I can use now.

Adrian Simpson

The Community

By purchasing this course,you'll get access to a private channel in my community devoted to this course.

The community is a Discord channel where like-minded people can chat, ask questions and network, learn together, 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 have access to a channel that is only for members of the course where you can ask me questions if ever you get stuck, or need help with something.

Who's Teaching the course?

My name is Kevin and most of the time you can find me over on YouTube where I teach over 50,000 subscribers HTML, CSS and occasionally some JS along the way.

I'm not only on YouTube though, I also teach in a physical classroom, and bring my teaching experience to this courses. 
Kevin's course is much more than just Sass, it's a dive into the modern web development process, a great reference for good practices, and an awesome way to learn advanced CSS.

Perfectly paced with a masterful balance of theory and real-wold applications and challenges, by the end of it you'll feel confident on coding anything the designers throw at you.

Facundo Corradini

Pre-registration period discount

The course offically launches on February 1, 2019. If you register for it between now and the 1st, you'll reserve your place and get a very nice discount.

Once the course launches on Feb 1, the price will jump from $90 to $120. 

What's included in this course?

This course goes into what Sass is and how it works, looking specifically at with over 150 videos and 10 hours of video, looking at:
  • What is Sass and how to install it
  • SCSS / Sass
  • Nesting, Variables, Extends, and Opoerators
  • Mixins
  • Using existing Sass functions
  • Creating custom Sass functions
  • Lists, maps, and Interpolation
  • Control directives
  • File structure
  • Building out several components, as well a a single-page, and a 5-page website
  • Challenges that help reinforce what you've learned
  • Access to a private channel in my community where you can ask for help, advice, and feedback!

If you'd like a bit more detail on what's included, scroll down and you'll find a complete list of all the videos and files that are included.
This covers covers all that Sass has to offer, but if you think it's a little too much for you to start with, there is a Sass Essentials edition of the course available too!

Contents

Introduction

An introduction to the course, including a brief introduction to Sass.
What is Sass anyway?
  • 6 mins
  • 61.7 MB
Preview
What Software do you need?
  • 1 min
  • 8.65 MB
Preview
VS Code
    Preview
    The Community
    • 6 mins
    • 113 MB

    The Setup

    A look at setting up everything we need to get started with Sass
    A note before we get started
      Installing Sass with Sass live compiler
      • 4 mins
      • 137 MB
      Preview
      Sass compilers for other text editors
        Using Sass live compiler and live server
        • 2 mins
        • 50.9 MB
        Preview
        Sass live compiler and live server settings
        • 4 mins
        • 107 MB
        Preview
        A couple of other very useful VS Code Extensions
        • 2 mins
        • 41.5 MB
        Preview
        CSS output style options
        • 4 mins
        • 50.7 MB
        What are source maps?
        • 3 mins
        • 32.8 MB
        Other command line alternatives (free and premium options)
        • 2 mins
        • 43.1 MB
        Sass vs SCSS - two different ways of writting Sass
        • 3 mins
        • 36.9 MB
        CSS vs Sass comments
        • 2 mins
        • 21.6 MB
        Preview

        Nesting

        Nesting is a key feature to Sass. It's really powerful, and often abused. Let's look at how to use it properly, and some of the really cool things ways you can nest within Sass
        Nesting selectors
        • 3 mins
        • 85.5 MB
        Preview
        SCSS vs Sass nesting
        • 3 mins
        • 75 MB
        Preview
        Nesting and the ampersand (&)
        • 8 mins
        • 135 MB
        Nesting properties
        • 3 mins
        • 31 MB
        Time for a challenge!
        • 2 mins
        • 21.5 MB
        challenge_01-starting-files.zip
        • 87.1 KB
        solution.scss
        • 769 Bytes

        Variables

        What are variables?
        • 4 mins
        • 161 MB
        Preview
        Variable inseption (variables inside variables)
        • 4 mins
        • 156 MB
        Variables and the cascade
        • 3 mins
        • 17.8 MB
        Naming variables
        • 5 mins
        • 174 MB
        It's challenge time!
        • 3 mins
        • 51.7 MB
        Variable Challenge Starting Files
        • 2.4 KB
        solution.scss
        • 1.17 KB

        Operators

        A cool way to do math in your CSS!
        Introduction to Operators
        • 5 mins
        • 25.5 MB
        Operators - a use case
        • 3 mins
        • 20.4 MB

        Building out a pricing table

        Okay, so we've learned a lot of new stuff, you've nailed a few challenges, now it's time to really step things up with a more realistic example of Sass in action.
        Pricing Table - Intro
        • 1 min
        • 28.7 MB
        Preview
        Pricing Table Starting Files
        • 115 KB
        Google font @import
          Writing the markup
          • 7 mins
          • 136 MB
          Setting up the variables
          • 11 mins
          • 171 MB
          Styling it up
          • 31 mins
          • 804 MB
          pricing-table-finished-version.zip
          • 10.6 KB

          Extends

          Extends are a controversial part of Sass, with a lot of people preferring not to use them, including myself. That said, they're a pretty neat feature, and if used properly, can be used well.
          An introduction to Extends
          • 4 mins
          • 37.6 MB
          Placeholders
          • 2 mins
          • 20.7 MB
          Don't forget about the other stuff you can do
          • 2 mins
          • 22.6 MB
          Problems with extends - 1
          • 2 mins
          • 16.3 MB
          Problems with extends - 2
          • 4 mins
          • 52.6 MB

          Mixins basics

          Mixins are one of the things that convinced me that Sass was worth learning. I saw some basic examples of them and was blown away. In this section, I'll introduce you to mixins, and we'll look at why they are so awesome.

          Once I've shown you how they work, you'll get to see if you really understood with a challenge that should force you to think a little bit :). 
          Introduction to Mixins
          • 4 mins
          • 28 MB
          Selectors inside mixins
          • 4 mins
          • 45.8 MB
          Mixin arguments - part one
          • 3 mins
          • 32.2 MB
          Mixin arguments part two - optional arguments
          • 3 mins
          • 21.1 MB
          Mixin arguments part three: more ways to work faster
          • 4 mins
          • 32.6 MB
          Mixin arguments part four - keeping things in the right order
          • 3 mins
          • 22.4 MB
          Mixin Challenge - Introduction
          • 6 mins
          • 89.6 MB
          LearnSass - mixin challenge.pdf
          • 103 KB
          Mixin Challenge - Starting Files
          • 782 Bytes

          Introduction to functions

          Functions are an essential part of Sass. You don't realize it yet, but you've already been using them too!

          As an introduction, we'll just look at what a function even is as well as a few of the functions that come packaged with Sass to get us started with them, and we'll revisit them later on once we've got into some of the more advanced concepts.
          Introduction to Functions
          • 2 mins
          • 11.7 MB
          Some of my favourite Sass functions
          • 7 mins
          • 55.3 MB

          Building an e-commerce card

          It's time to put everything we've learned so far together and build something! I'd suggest trying to build this all out on your own with the provided files, then seeing how I approach it, but there ain't no shame in just following along either!
          The Markup
          • 6 mins
          • 95.4 MB
          card-starting-files.zip
          • 313 KB
          Getting Sass set up and running
          • 3 mins
          • 46.5 MB
          Settin' up the variables
          • 5 mins
          • 66.7 MB
          Creating the mixins
          • 9 mins
          • 168 MB
          Styling the typography
          • 7 mins
          • 132 MB
          Styling the buttons
          • 6 mins
          • 141 MB
          Finishing touches
          • 8 mins
          • 202 MB
          my-finished-files.zip
          • 154 KB

          Lists

          Lists are an essential tool for some of the more advanced things we'll be looking at soon. They aren't complicated by any means, but they can be a little strange.
          Introduction to Lists
          • 1 min
          • 4.92 MB
          List lengths
          • 2 mins
          • 10.3 MB
          The different types of lists
          • 1 min
          • 8.52 MB
          Accessing specific list items
          • 1 min
          • 8.03 MB
          The different ways to write lists
          • 3 mins
          • 21.9 MB

          Interpolation

          Interpolation is all about using variables in places that they aren't really meant to be used, and while that might sound strange (and be really hard to pronounce), it's super-duper useful!
          What is interpolation?
          • 3 mins
          • 14.7 MB
          Interpolation and math
          • 1 min
          • 4.1 MB
          Interpolation challenge.pdf
          • 26.6 KB

          More Mixins

          Another look at mixins, and some even cooler and more powerful stuff that you can do with them!
          A quick refresher on Mixins
          • 4 mins
          • 32.9 MB
          A look at variable arguments
          • 4 mins
          • 35 MB
          Staying organized with variables
          • 2 mins
          • 15.7 MB
          Variable arguments with @include
          • 2 mins
          • 12.7 MB
          Variable arguments with @include - part two
          • 5 mins
          • 102 MB
          Mixin challenge - part one.mp4
          • 2 mins
          • 30 MB
          mixin challenge handout.pdf
          • 34.5 KB
          Mixin challenge - part two.mp4
          • 3 mins
          • 55.4 MB
          A look at @content
          • 5 mins
          • 59 MB
          Using @content to make awesome media query mixins
          • 4 mins
          • 58.1 MB
          Adding a custom size media query
          • 2 mins
          • 36.2 MB

          @for

          For loops are extremely powerful, and can be very useful. In this introduction to them, I look at a nice example of using them to create a grid system that you could use on a site, using only a few lines of SCSS to output a large amount of CSS. As we go through the different videos, I look at the basic function of a @for loop, and slowly make it better and better, adding in math and variables to really make things shine.
          Intro to Sass @for
          • 2 mins
          • 14.9 MB
          Using the $i variable
          • 1 min
          • 6.64 MB
          Using interpolation
          • 2 mins
          • 17.8 MB
          Adding in some math
          • 2 mins
          • 13.4 MB
          A little more math and a new variable
          • 2 mins
          • 26.8 MB
          @for challenge
          • 2 mins
          • 18.3 MB
          @for challenge.pdf
          • 35.2 KB

          @each

          Introduction to @each
          • 2 mins
          • 11.9 MB
          A more useful example of @each
          • 1 min
          • 8.34 MB
          Using nested lists
          • 4 mins
          • 38.4 MB
          Refactoring
          • 4 mins
          • 51.9 MB

          @if, @else, @if else and the if() function

          Intro to the @if directive
          • 4 mins
          • 28.2 MB
          A more realistic example
          • 3 mins
          • 37 MB
          @else directive intro
          • 1 min
          • 6.51 MB
          A more realistic look at @else
          • 3 mins
          • 46.6 MB
          Using @if and @else to make a cool @mixin
          • 4 mins
          • 29.9 MB
          Improving the mixin
          • 3 mins
          • 35.5 MB
          Introduction to @if else
          • 4 mins
          • 36.2 MB
          The if() function
          • 2 mins
          • 12.9 MB
          Using the if function to write less code
          • 3 mins
          • 62.6 MB

          Creating your own functions

          We've already seen, and used, a few of the functions which come built-in with Sass. They're useful, but sometimes you need to make something yourself. This section is an introduction on how to do just that.
          Introduction to custom functions
          • 4 mins
          • 39.3 MB
          Variable number of arguments
          • 3 mins
          • 33.7 MB
          functions - starter file for following videos.zip
          • 898 Bytes
          Dynamically set text color
          • 7 mins
          • 76.4 MB
          Making the output look a little better
          • 2 mins
          • 24.1 MB
          Refactor challenge.mp4
          • 2 mins
          • 12.3 MB
          Refactor challenge - solution.mp4
          • 4 mins
          • 46.6 MB

          Warnings and Errors

          We can add in our own warnings and errors to our mixins and functions.
          Intro to debugging in Sass
          • 1 min
          • 3.32 MB
          The warning
          • 4 mins
          • 53.5 MB
          Creating an error
          • 2 mins
          • 28.4 MB
          Improving our error with interpolation
          • 2 mins
          • 35.9 MB
          Debug
          • 4 mins
          • 95 MB

          Maps

          Maps are sort of like nested lists, but with key: value pairs. I avoided them for the longest time because they seemed overly complicated for things I could do with variables, but the more I learned about them, the more awesome I realized they are.
          Introduction to Sass maps
          • 4 mins
          • 20.7 MB
          How to access maps
          • 3 mins
          • 15.1 MB
          Access maps made easier
          • 5 mins
          • 33.2 MB
          Mapception
          • 3 mins
          • 17.5 MB
          Accessing maps inside of other maps
          • 2 mins
          • 18.7 MB
          Accessing maps inside of other maps made easier (plus a mini challenge)
          • 5 mins
          • 50.1 MB
          Improving our media query mixin with a map
          • 5 mins
          • 55.8 MB
          Maps and `@each`
          • 2 mins
          • 11.1 MB
          Accessing maps with `@each` challenge
          • 7 mins
          • 67.2 MB
          Accessing maps with `@each` solution
          • 5 mins
          • 54.1 MB
          map-has-key()
          • 3 mins
          • 15.5 MB
          A more realistic example of map-has-key()
          • 3 mins
          • 52.9 MB

          Improving our media query mixin with map-has-key()

          See if you can take what we've learned so far to improve our media query mixin
          Improving our media query mixin - challenge
          • 1 min
          • 4.74 MB
          map-has-key-challenge.zip
          • 773 Bytes
          The solution
          • 2 mins
          • 36.1 MB

          Improving our media query mixin with type-of()

          A look at the type-of() function
          • 2 mins
          • 14.2 MB
          Using type-of to improve our mq mixin even more! A challenge
          • 3 mins
          • 35.6 MB
          And making it even better!
          • 4 mins
          • 83.8 MB
          type-of-challenge.zip
          • 978 Bytes

          Partials and file organization

          Partials are pretty much little Sass files. They allow us to break our code up into a more organized system, and then import all of the individual files into one file, which then gets compiled into our final CSS file.
          Introduction to partials
          • 5 mins
          • 61.2 MB
          Order matters when importing your partials
          • 4 mins
          • 62.7 MB
          The 7-1 system and what I actually use (file organization)
          • 10 mins
          • 197 MB

          Building out a 1-page site

          Putting everything that's been covered so far to use, it's time to build out a site.
          Introduction to the project
          • 2 mins
          • 102 MB
          Preview
          assets.zip
          • 14.4 MB
          A look at the files
          • 3 mins
          • 48.1 MB
          The Markup - Navigation
          • 5 mins
          • 212 MB
          The Markup - Home and About
          • 6 mins
          • 233 MB
          The Markup - Facts and Meals
          • 5 mins
          • 240 MB
          The Markup - Testimonial and Footer
          • 5 mins
          • 227 MB
          First variables and mixins
          • 7 mins
          • 130 MB
          Setting up a custom function
          • 3 mins
          • 41.2 MB
          Adding an error to the function
          • 2 mins
          • 32.9 MB
          Setting up the typography
          • 9 mins
          • 339 MB
          Setting up the general layout
          • 4 mins
          • 98.3 MB
          Styling the navigation
          • 5 mins
          • 142 MB
          Styling up the home section layout
          • 4 mins
          • 106 MB
          Stlying the About section, and some trouble shooting
          • 5 mins
          • 201 MB
          Creating an underline pseudo element mixin
          • 6 mins
          • 193 MB
          Styling the facts and meals sections
          • 8 mins
          • 314 MB
          Styling the testimonial and footer, and fixing a mistake
          • 11 mins
          • 369 MB
          Adding in a media query mixin
          • 9 mins
          • 405 MB
          About section - large screen layout with grid
          • 9 mins
          • 470 MB
          Creating a grid mixin
          • 8 mins
          • 405 MB
          Fixing up the nav and about section
          • 3 mins
          • 138 MB
          Fixing up the typography + closing thoughts
          • 5 mins
          • 259 MB

          5-page travel blog with Sass and CSS Grid

          In this final section of the course, we're building out a 5-page site using what we've learned about Sass so far.

          I strongly encourage you to check out the first few videos to see what we're dealing with, but then to try and tackle it on your own as a big final challenge.
          Coming soon
            Project overview
            • 4 mins
            • 177 MB
            Preview

            Closing thoughts

            I hope you enjoyed the course, plus a few other things
              Future Updates

                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.

                FAQ

                How much content is there?

                There are over 150 videos totalling more than 10 hours of lessons. Sass is a big topic!

                On top of that there are challenges where I give you a problems to solve, based on what we've covered so far in the course.

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

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

                With that said, it does assume that you're comfortable with HTML & CSS already. I don't go into a lot of detail about the CSS I'm writing, focusing more on the Sass I'm writing and looking at the output that it's producing. You may happen to learn some new CSS stuff along the way, but I assume that you're relatively comfortable with it already.

                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!

                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, as well as using challenges throughout the course to ensure that you are actually learning, and not just blindly following along.

                On top of this, we look at some real-world type projects, with the final one being a multipage website that we'll build out together using CSS Grid!

                On top of this, you also get access to a private channel in my community where you can ask me, and others enrolled in the course, for help or clarification if ever it's needed!

                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!

                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!