Advanced Sass Workshop, focusing on writing mixins & functions
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
01-ampersand
02-lists
03-grid
04-breakpoints
05-color-generating
06-color-function
slides
walkthroughs-plus
.gitignore
README.md

README.md

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.

Pre-requisites:

  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

Gameplan

The way this workshop will run is as follows:

Overview

  • 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()

Functions

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

Theming

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

Sass++

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

Final Challenge: Putting it All Together