Coding for designers: haml, sass and stasis

First, this:

• HAML
• SASS
• Stasis

Necessary

• Rubygems

Helpful

• 5 minutes of shell basics

• 5 minutes of git

• github-account and github for mac

What's inside

The 1140 CSS Grid in its standard version as well as converted to haml and sass. I chose the 1140 because it is a great vehicle to learn what to avoid:

• works in % :(
• loads mobile styles extra instead of first :(
• .last class instead of .first class or css-selector :(
• has styles directly in the example html file :(

Just compare the original files in the 1140_CssGrid_2-folder with the files in haml-sass-1140 to learn the basic syntax.

The stasis page will tell you how to render your haml and sass files into html and css.

Fork

• Log into Github, fork this repo and clone to your machine. The cloning is easier with Github for mac.

Mod

• Convert Eric Meyer's CSS reset into a Sass partial and @import it into your 1140 sass file. The Sass-Reference is your friend.

• Change the example page to make a site about cats. Your content is here.

Share

Don't forget to push the changes you made to github so we can enjoy your site about cats!!11!

Links

• Refactoring with Sass

• Compass

Hooked?

Then maybe you are ready to leave Kansas and/or switch from JavaScript to CoffeScript.