SXSW 2012: Simplify CSS Development with Sass & Compass

Alex Lemanski
Bitfyre, Founder

Presentation Description

Simplify and speed up your CSS development with Sass. Overcome browser differences – particularly with CSS3 – and build grids the right way with Compass. Sass is a CSS meta language that brings more functional programming to the css language and complies to standard browser supported CSS. It adds tools like variables, functions, and mixins, as well as compilation tools for debugging and optimization. Compass builds an additional framework of tools on top of Sass. It adds mixins for almost all the new CSS3 modules to abstract away syntax inconsistencies and browser prefixes. It also enables the development of CSS frameworks *the right way*, using semantic classes instead of presentation oriented classes. Compass has ports Frameworks like Blueprint, YUI, 960.gs, as well as even some Compass only ones like Susy. On top of that, there are also loads of extensions to Compass for everything from CSS3 button generators to more complex sprite and image generators.

Presentation Notes

Slides: http://bit.ly/teamSass

The Basics

  • Variables (font-colors, font-family, etc.). You can set a default variable, but then have an opportunity to change it with the “!default” operator similar to “!important”
  • Nesting selectors: .nav { li { … } … }
  • Parent references with the nesting selectors
  • Nesting statements: background: { color: …; image: …; }
  • Comments (Sass specific) that are stripped out when compiled: // instead of /* … */
  • Loops: @for, @each, @while
  • Mathematical operations

Desktop GUI’s

Command Line

  • Sass itself
  • Sass-convert
  • Vast number of static generators (Middleman, which can also minify your code)
  • Compass

Debugging Tools

  • Generated Line Comments
  • FireSass for Firebug, allows you to see what Sass file a particular element definition is in

Good Practices for CSS

  • Don’t nest more than 4 selectors deep
  • Break things down as much as possible
  • Work from the main area …

Put all of your partial sass files in a “lib” (library) sub directory

Output Configurations

  • :line_comments
  • :debug_info
  • :compressed, :nested, and a couple others

CMS Plugins

What is Compass?

  • Gives you helper functions on top of what Sass already has. For instance, it can auto convert between hsl and rgb.
  • Mixins for CSS3. Generates all of the browser implementations of new tags (-webkit-…, -moz-…, etc).
  • Framework for Building Frameworks.
  • Plugin Architecture for creating Mixins for buttons where you can publish for Ruby and then others can take them and re-use them.

Additional Resources

Posted in SXSW 2012.

Leave a Reply

Your email address will not be published. Required fields are marked *