Modular & Maintainable Sass Workshop

So you can start tinkering immediately you should create an account at CodePen.io. All examples will be available during the workshop so you can follow along and experiment.

A secondary set of static files will be provided after the workshop. You can download them from Github.com.

Installation

We won't spend any time during the workshop doing installation. It just never works and takes up too much time. After the workshop I'm happy to help. Otherwise, there are two ways that you can start using Sass:

1. Purchase a GUI Application – If you're using OSX your best bet is to use CodeKit or Compass.app. For Windows users Scout or Compass.app work pretty well.
2. Use the command line – If you aren't afraid of the command line then there's a simple guide for Windows and OSX users over at Adobe.com. If you're new to the command line here's a nice tutorial.

Workshop Sections

The workshop will be divided up into the following sections:

1. Frameworks
2. Basic
3. Intermediate
4. Advanced

Frameworks

1. Bourbon | Neat
2. Compass | Susy

Basic

Exercise 1 - Syntax

• Sass Syntax
• SCSS/Sassy Syntax

Exercise 2 - Variables

• Basic Usage

Exercise 3 - Nesting

• Native CSS
• Overview
• Inception Rule of 3

Exercise 4 - Parent Selectors:

• Referencing a Parent
• Tricks with Modernizr | Modernizr Docs

Intermediate

Exercise 5 - Operations

• Basic Operations

Exercise 6 - Mixins

• Simple Mixin
• Complex CSS Version
• Complex Sass Version

Exercise 7 - @extend

• Basic Extend Directive

Exercise 8 - Placeholders

• Basic Placeholder

Exercise 9 - Mixins vs. Extend

• Part 1
• Part 2

Advanced

Exercise 10 - Functions

• Math Functions
• Color Functions

Exercise 11 - Control Directives

• if, else if, else
• each loop
• while loop

Exercise 12 - Media Queries

• Basic Media Query
• @content

Exercise 13 - Maps

• Basic Map

Modular Systems & Pattern Libraries

Boilerplates

1. Foundation
2. Rock Hammer
3. Bootstrap

Custom Systems

Creating a Modular System

In order to create a modular system, modules must be:

1. Nestable
2. Combinable
3. Clearfixed
4. Flexible
5. Sepatared by Structure and Aesthetics

Pattern Libraries and Rapid Prototyping

Provide the following:

1. Consistent user experience
2. Consistent aesthetics
3. Reusable architecture
4. Maintainable and tested structure

LibSass

LibSass, C implementation of Sass. Insanely fast, works as a system level library on OSX, Linux and Windows, wrappers for multiple languages.