davgit / sass-workshop

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

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 three sections:

1. Basic
2. Intermediate
3. Advanced

Basic

1. Syntax: Sass Syntax | SCSS/Sassy Syntax
2. Variables: Example
3. Nesting: CSS Example | Sass Example
4. Parent Selectors: Example

Intermediate

1. Operations (Math…run!): Example
2. Mixins: Simple | Complex CSS Version | Complex Sass Version
3. @extend Directive: Example
4. Placeholder Directive: Example

Advanced

1. Functions: Example
2. Color Functions: Example
3. Control Directives: if, else if, else
4. Media Queries: Example
5. @content Directive: Example

Frameworks

1. Bourbon | Neat
2. Compass | Susy

Modular Systems

1. File Structure
2. @import directive
3. Modules

Boilerplates

1. Foundation
2. Rock Hammer
3. Bootstrap

On the Horizon

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