Sass

Basics

• Sass features tutorial
• Sass reference
• Sass functions

_partial.sass  - partial files, for inclusion, will not be compiled

• SASS - The Next Wave in Styling and Theming
• Sass and Compass overview

• http://blog.railslove.com/2012/03/28/smacss-and-sass-the-future-of-stylesheets/

• http://sonspring.com/journal/sass-for-designers
• Using Sass & Compass in Drupal Theming - scribd, slide 40 on for techy

Sasson config.rb

prefered_syntax = :scss
http_path = '/'
css_dir = 'styles'
sass_dir = 'styles'
images_dir = 'images'
javascripts_dir = 'scripts'
relative_assets = true
line_comments = true

#output_style = :compressed
output_style = :expanded

PHP

• https://github.com/richthegeek/phpsass

Ruby init

gem install sass 
mv style.css style.scss 
sass --watch style.scss:style.css

Don't forget to add to $PATH (i.e. /var/lib/gems/1.8/bin)

Conversion tools

• css2sass
• http://toki-woki.net/p/least/

• http://css3.bradshawenterprises.com/blog/why-sass/
• http://tatiyants.com/getting-dry-with-sass/

Vertical rhythm

• http://compass-style.org/reference/compass/typography/vertical_rhythm/ - px based
• https://github.com/pyrsmk/vertical-rhythmic - em based
• https://github.com/OliverJAsh/vertical-rhythm - em based

Other

• http://thoughtbot.com/bourbon/
• sass-recipes
• https://github.com/perezd/CSS3-Ribbons#readme

Compass

• Compass tutorials
• Compass reference
  • CSS3
    • Images (use for gradients)
  • Helpers
  • Layout
    • grids
    • sticky footer
    • stretching
  • Reset utilities
  • Typography links
    • lists
    • text
    • vertical rhythm

• http://compass-style.org/frameworks/

Guides

• Compass Best Practices
• Sass (SCSS) and Compass Cheat Sheet

• stackoverflow: How does 'compass watch' work/how is it used with rails

• http://www.youtube.com/playlist?list=PL45DD77A4CCA76ED3

Grids

• https://github.com/nextmat/compass-960-plugin - used in sasson
• http://compass-style.org/reference/blueprint/grid/

• http://theled.co.uk/blog/archive/2010/06/18/semantic-960-gs-using-sass-and-compass/
• http://blog.carbonfive.com/2009/03/02/compass-960-semantics/
• http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/

Susy

• Susy - Responsive grids for Compass.
• Introduction to Building Websites Using Susy and Compass's Vertical Rhythm

Zocal

• https://github.com/adamstac/zocial - css3 service buttons

Drupal

• Using SASS with Drupal, December 18, 2011

• http://www.systemseed.com/blog/using-compass-and-sass-generate-skinr-styles

• http://drupal.org/project/compass
• sasson
• sassy