Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Advanced Sass Workshop, focusing on writing mixins & functions

Resources

Releases

No releases published

Packages

No packages published