HTML and CSS are ubiquitous on the web, but they were mostly created in a vacuum. Haml, Sass, and Compass provide helpful abstractions and utilities to remove some of the repetition and noise in your code for more rapid development and easier maintenance. This talk was given at the Boston Ruby Group on September 14, 2010.

1. Haml, Sass and Compass for Sane Web Development Jeremy Weiskotten @doctorzaius

2. (We’re hiring.)

3. Haml

6. Mark Hamill may not be beautiful, but…

8. Is this beautiful?

9. No.

23. Not.

27. So why do I like Haml?

32. Sass

34. Sass is a big deal.

35. Typical CSS

36. Sass Nested Rules

38. Typical CSS

39. Sass Mixin

46. Compass

48. Lots of toys!

52. Fancy Buttons

53. Lemonade .logo { background: sprite-image("lemonade/lemonade-logo.png"); } .lime { background: sprite-image("lemonade/lime.png"); } .coffee { background: sprite-image("other-drinks/coffee.png") no-repeat; }