Sass Basics Course (How To)

Sass is a stylesheet language that extends CSS with features like variables, nested rules, mixins, and functions, in a CSS-compatible syntax. In this course, you'll learn to use the powers of Sass to boost your front end workflow. The examples will teach you why you should use Sass in your projects. By the end, you will be writing more efficient CSS using code that is easy to read and maintain.

What you'll learn

• What is a CSS Preprocessor?
• Variables, nested rules and mixins
• Separating your stylesheet into partials
• Storing data in maps
• Functions, loops and conditionals

Getting Started with Sass

Get up and running with Sass! In this stage, you'll learn to compile Sass into plain CSS, and use variables to make your code less repetitive and easier to maintain.

Chevron 9 steps

• What is Sass?

  2:29

• Installing and Using Sass

  2:09

• Introduction to Sass Review

  5 questions

• Compiling Sass to CSS

  4:15

• Compile a Directory of Sass Files

  3:21

• Compiling Sass Review

  6 questions

• Declaring and Using Variables

  5:28

• Naming Variables

  5:09

• Declare and Use Variables

  5 objectives

Improve Your Workflow with Sass

Ready to experience the true power and elegance of Sass? In this stage, you'll learn to keep your code "DRY", using nested selectors and the & symbol to reference the parent selector of nested rules. You'll also create reusable blocks of code called mixins, and extend the properties of other selectors via the @extend directive.

Chevron 11 steps

• Nested Selectors

  7:23

• Use the Ampersand to Reference Parent Selectors

  6:57

• Write Nested Selectors

  4 objectives

• Introducing Mixins

  6:53

• Pass Content Blocks to Mixins

  4:42

• Write a Mixin

  4 objectives

• Extend the Properties of Selectors

  4:05

• Extend Placeholder Selectors

  5:04

• Practice Extending a Selector

  3 objectives

• Using Comments

  3:40

• Sass Workflow Review

  7 questions

Write Smart and Efficient CSS with Sass

Learn to organize your Sass projects with partials, and efficient ways to manage media queries, color values and repeating patterns in your code.

Chevron 8 steps

• Separate Your Stylesheet Into Partials

  9:37

• Nesting Media Queries

  6:38

• Partials and Media Queries Review

  5 questions

• Color Functions

  8:26

• Custom Functions

  6:22

• Write a Sass Function

  3 objectives

• Create a Function for Flexbox Layout

  6:23

• Functions Review

  5 questions

Add Reusable Logic to Your Sass

Time to add powerful logic to your stylesheets! Push your Sass skills further by creating smarter and extensible mixins. Write conditionals and loops to simplify repetitive tasks, and learn how Sass helps you handle errors and debug code in the browser.

Chevron 12 steps

• Creating Powerful Mixins

  4:30

• Smarter Mixins with null and Keyword Arguments

  8:17

• Advanced Mixins Challenge

  4 objectives

• Add Conditional Logic to Your Stylesheets

  8:11

• Storing Values in Maps

  7:37

• Write Loops with @for

  6:24

• Loop Through Lists with @each

  4:25

• Loop Through Data in a Map with @each

  6:18

• Maps and Loops Review

  5 questions

• Handling Errors with @error and @warn

  3:51

• Debugging Sass with Sourcemaps

  3:08

• Debugging Review

  5 questions