Skip to content


Repository files navigation

Workshop: Customizing Your Stylesheets

So you’ve heard of Sass. In fact, you're probably using it. You write variables and use predefined mixins like a pro. But are you using Sass to its full potential?

This workshop will explore advanced Sass functionality. We’ll talk about the fundamental differences in lists, maps, extends, and mixins, and will dive deep into writing custom mixins. We’ll discuss partials and how to further DRY out our Sass by leveraging available functions, then writing our own custom functions, documenting the process, and architecting a fluid system.


  1. Before getting started, please make sure to have node installed onto your system. This is a great set of instructions for installing node with a package manager. I would highly recommend using Homebrew to install node on a Mac.
  2. Optionally, for scss linting within the terminal, have Ruby installed.
  3. Download this starter environment.

Tools and Resources


The way this workshop will run is as follows:


  • Quick Sass review
  • Syntax
  • Variables
  • Variable Abstraction
  • Nesting

The Almighty Ampersand

  • Nesting with the ampersand
  • Naming with the ampersand
  • The trailing ampersand
  • The Double Ampersand
  • 01 - Walkthrough: Ampersand

Beyond Basics

  • @extend
  • Placeholder Selectors
  • @mixin
  • @include

Control Directives

  • Lists
  • List Functions
  • 02 - List Exercise
  • Maps
  • Map Functions
  • @each loop
  • @for loop
  • @while loop
  • 03 - Grid Exercise

Let's Do Some Math and Play With Colors

  • Supported Operators
  • Sass Math
  • Color functions
  • Playing with Color
  • 05 - Color Generation

Mixin Deep Dive

  • Mixin + @content
  • Mixins + Maps
  • 04 - Breakpoint Mixin
  • Default arguments
  • Null Defaults
  • Sassy Shape Mixin
  • Using Sassy Shapes
  • SVG Fallback Mixin
  • Walkthrough: Recreating contrasted()


  • Writing custom functions
  • Px to Rem Function
  • Property Getter
  • 06 - Color Function
  • Arglists


  • !default
  • @warn and @error
  • Theming with Maps
  • Walkthrough: Modular Animations


- File Organization
- SassDoc
- *Advanced Example: Pixel Art&

Final Challenge: Putting it All Together


Advanced Sass Workshop, focusing on writing mixins & functions






No releases published


No packages published