CSS to Sass Course (How To)

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

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