Warning: Parameter 2 to SyndicationDataQueries::posts_search() expected to be a reference, value given in /home/techoryc/public_html/sxsw/wp-includes/class-wp-hook.php on line 298

Warning: Parameter 2 to SyndicationDataQueries::posts_where() expected to be a reference, value given in /home/techoryc/public_html/sxsw/wp-includes/class-wp-hook.php on line 298

Warning: Parameter 2 to SyndicationDataQueries::posts_fields() expected to be a reference, value given in /home/techoryc/public_html/sxsw/wp-includes/class-wp-hook.php on line 298

Warning: Parameter 2 to SyndicationDataQueries::posts_request() expected to be a reference, value given in /home/techoryc/public_html/sxsw/wp-includes/class-wp-hook.php on line 298
SXSW Notes » Blog Archive » Simplify CSS Development with Sass & Compass
Information and Insights from Sessions at SXSW in Austin, TX

Simplify CSS Development with Sass & Compass

Posted: March 11th, 2012 | Author: | Filed under: SXSW '12 | Comments Off on Simplify CSS Development with Sass & Compass

Sunday, March 11 – 3:30PM – 4:30PM
Alex 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 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.