CSS to Sass Course

Go to class
Write Review

Free Online Course: CSS to Sass Course provided by Treehouse is a comprehensive online course, which lasts for 1-2 hours worth of material. The course is taught in English and is free of charge. CSS to Sass Course is taught by Guil Hernandez.

Overview
  • If you're not sure where to begin when converting CSS over to Sass, this is the place to start. In this course, you'll learn how to convert a simple web project over to Sass, the most widely used CSS preprocessor.

    This course aims to clear up common misconceptions about Sass, and help you fit Sass into your front-end workflow.

    What you'll learn

    • Installing and Updating Sass
    • Fitting Sass into your workflow
    • Refactoring CSS with Sass
    • Debugging Sass code

Syllabus
  • Installing Sass and Setting up the Project

    Learn how to get Sass up and running in your project! We'll cover methods for installing and updating Sass with a few friendly commands. Then, we'll bring our website project into Workspaces, where we'll begin refactoring with Sass.

    Chevron 6 steps
    • Course Overview

      2:30

    • Installing and Updating Sass

      4:13

    • Up and Running with Sass

      2:59

    • The --watch Command

      5:10

    • Bringing our Sass Project into Workspaces

      3:19

    • Installing Sass and Setting up the Project

      7 questions

    Refactoring with Sass

    After we break our CSS up into partial files, we'll begin refactoring our CSS with Sass and learn the benefits of using Sass in our front-end workflow.

    Chevron 10 steps
    • Breaking the Style Sheet into Partials

      7:35

    • Finishing and Importing our Partials

      6:17

    • Placeholder Selectors

      10:59

    • Nesting Selectors

      5:22

    • Color Variables

      8:34

    • Font Stack and Asset Variables

      6:44

    • Reusing Code with Mixins

      6:57

    • Writing a Mixin for Common Text Patterns

      6:45

    • Defining Media Queries

      8:13

    • Refactoring with Sass Review

      7 questions

    Debugging, Best Practices, and Production

    This stage covers common errors that can happen when using Sass features like variables, mixins, extends, and more. After we optimize our project's style sheet for production, we'll learn how to debug our Sass code in the browser with source maps, and go over helpful tools and resources.

    Chevron 5 steps
    • Debugging Errors in Sass

      7:04

    • Debugging in the Browser with Source Maps

      3:16

    • CSS Output Styles

      4:55

    • Moving Forward with Sass

      4:16

    • Sass Best Practices and Debugging Review

      7 questions