/sass-workshop

Sass workshop info and examples covering Sass and dividing up themes into basic, intermediate & advanced topics.

Primary LanguageCSS

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

Exercise 2 - Variables

Exercise 3 - Nesting

Exercise 4 - Parent Selectors:

Intermediate

Exercise 5 - Operations

Exercise 6 - Mixins

Exercise 7 - @extend

Exercise 8 - Placeholders

Exercise 9 - Mixins vs. Extend

Advanced

Exercise 10 - Functions

Exercise 11 - Control Directives

Exercise 12 - Media Queries

Exercise 13 - Maps

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.