Categories
SXSW '12

Simplify CSS Development with Sass & Compass

Sunday, March 11 – 3:30PM – 4:30PMAlex Lemanski Founder/Web Craftsman Bitfyre Slides, Links, Examples: http://bit.ly/teamSass Saas allows for variables so you only have to replace elements in a single place in your style sheet. Nesting selectors so you don’t have to repeat multiple tags or divs Nesting Statements as well Tools: Web Workbench (Visual Studio […]

Sunday, March 11 – 3:30PM – 4:30PM
Alex Lemanski Founder/Web Craftsman Bitfyre

Slides, Links, Examples:

  • Saas allows for variables so you only have to replace elements in a single place in your style sheet.
  • Nesting selectors so you don’t have to repeat multiple tags or divs
  • Nesting Statements as well

Tools:

  • Web Workbench (Visual Studio Plugin)
  • Compass.app (Mac/Windows/Linux)
  • CodeKit (Mac)
  • Scount

Commandline Tools:

  • Saas itself
  • sass convert
  • Middleman
  • Compass

Debugging Tools:

  • Generated Line Comments
  • FireSass for Firebug

Common Good Practices in CSS (same for Sass):

  • don’t nest more than 4 selectors deep
  • break things down as much as possible
  • work from the main area of content out

Number conversions can be created to convert px to em or back.

For the actual compiled CSS output, you can display it whatever way you’d like:
nested, expanded, compact

Nice mixins for the various browser-specific syntax – Sass can just bring them all in.