O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The Complete Sass & SCSS Course: From Beginner to Advanced

Video Description

No more cluttered CSS! Realize clean designs lightning-fast and without frustration using Sass & SCSS

About This Video

  • How to use Sass / SCSS to create more flexible designs in less time and generate CSS code from them
  • How to use variables to store colors, sizes, fonts and more to avoid repetition and make your designs more flexible and reusable
  • How to perform calculations right inside your Sass & SCSS code to create responsive and flexible layouts
  • How to use mixins and imports to reuse your existing designs and finish new projects in no time
  • How to use inheritance in Sass to avoid duplicating code and the nasty bugs that come with it
  • How you can use Sass to write scaleable CSS code even for big projects

In Detail

This course is the complete masterclass for Sass & SCSS development. You will also learn how to use Sublime Text 3, one of the most popular lightweight text editors out there, confidently and write your code with lightning speed. During the course, you will create useful code snippets in Sass that you can use in future projects to double your development speed -- and you will have all the tools you need to create more such snippets to enhance your productivity even further and make clients happy! You can test what you learned in several quizzes and by coding along while we create a library of powerful code snippets. With the right mindset, understanding, and application of the teachings in this course, you will instantly begin to move towards Mastering Sass & SCSS! This course will not remain this price forever! It's time to take action!

Table of Contents

  1. Chapter 1 : Introduction - Welcome To The Complete SASS & SCSS Course!
    1. Introduction: Welcome To The Complete SASS & SCSS Course! 00:03:36
  2. Chapter 2 : Sass Overview
    1. What Is a Preprocessor? 00:04:09
    2. Sass or SCSS? 00:04:45
  3. Chapter 3 : Setup
    1. Setting Up Sublime Text 3 00:08:10
    2. Installing Sass / SCSS 00:04:19
    3. A Quick Test 00:04:39
    4. Setting Up The Project Structure 00:05:59
  4. Chapter 4 : Variables
    1. Variables in Sass 00:04:03
    2. Using Variables Correctly 00:08:39
  5. Chapter 5 : Partials
    1. Partials 00:06:53
  6. Chapter 6 : Mixins
    1. Mixins in Sass 00:08:18
    2. Mixins with Arguments 00:11:33
    3. Passing Content into Mixins 00:04:38
  7. Chapter 7 : Imports
    1. Imports in Sass 00:06:54
    2. Practice Activity: A Mixin to Import Fonts 00:05:03
  8. Chapter 8 : Media Queries
    1. Nested Media Queries in Sass 00:05:20
    2. Practice Activity: Mixins & Media Queries 00:05:20
  9. Chapter 9 : Operators
    1. Basic Arithmetic & The Sass Shell 00:04:43
    2. Color Arithmetic 00:03:14
  10. Chapter 10 : Functions
    1. What Are Functions? 00:03:07
    2. Built-in Functions 00:06:05
    3. Creating Your Own Functions 00:09:43
  11. Chapter 11 : Inheritance
    1. Inheritance with @extend 00:06:31
    2. More about @extend (+ Sass placeholders) 00:05:00
    3. Do You Need It? @extend vs. @mixin 00:05:13
  12. Chapter 12 : Conditional Directives
    1. Using the @if and @else Directives 00:06:51
    2. Practice Activity: @if Directives To Switch Themes 00:07:15
    3. Practice Activity: A Useful Mixin With @if 00:04:51
  13. Chapter 13 : Loops
    1. @for Loops 00:04:44
    2. @each Loops 00:06:46
    3. @while Loops 00:05:27
  14. Chapter 14 : Sass Frameworks
    1. An Overview of Susy, Breakpoint & Compass 00:05:05
    2. Installing the Toolkits & Frameworks 00:07:11
    3. Getting Started With Susy: Creating Your Own Grid System 00:15:41
    4. More About Susy: Border-Box-Sizing 00:05:53
    5. Mobile-First Design & Media Queries With Breakpoint 00:09:15
    6. Compass: Your Helper for Everything Else 00:10:34