CSS to Sass Course (How To)

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.

• 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.

• 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.

• 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