Sass

Basics

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

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

Ruby

Init;

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

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

PHPSass - richtheeek fork of PHamlP for Drupal
- https://github.com/richthegeek/phpsass
- compass; https://github.com/richthegeek/phpsass/issues/4

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

PHamlP - older

Compass

Compass tutorials
Compass reference
- CSS3
  - Images (use for gradients)
- Helpers
- Layout
- Reset utilities
- Typography links

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

Guides

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://blog.carbonfive.com/2009/03/02/compass-960-semantics/
- http://theled.co.uk/blog/archive/2010/06/18/semantic-960-gs-using-sass-and-compass/

http://compass-style.org/reference/blueprint/grid/

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

Vertical rhythm

If you don't reset browser margin and padding defaults, you're gonna have a bad time.

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

vertical-rhythmic

https://github.com/pyrsmk/vertical-rhythmic - em based
- https://github.com/pyrsmk/vertical-rhythmic/blob/master/_vertical-rhythmic.scss

Usage

1em and 1.5em are the defaults (16px being browser em default. line-height is normally 1.4em)

$base-font-size: 1em;
$base-line-height: 1.5em;

@import "vertical-rhythmic";

@include $font-size()
  number $font-size   : font size, in ems
  integer $lines      : number of whitespace lines for the line-height
  Keeps base line proportions by default

first basic method; default-font-size: 0.9em and line-height: 1.4em h1 the space of two 1.4em lines

 @include $font-size(1.5)

second basic;

 font-size:1.5em;
 line-height:rhythm(auto,1.5em);

@include margin()
   integer $lines          : number of whitespace lines (default: 1)
   number $font-size       : actual font-size, in ems, to calculate with (default: 1em)
   integer $border-width   : width of additionnal borders around the box
   Useful to substract borders from the whitespace to not break the rhythm

@include margin-top
  integer $lines          : number of whitespace lines (default: 1)
  number $font-size       : actual font-size, in ems, to calculate with (default: 1em)
  integer $border-width   : width of additionnal borders around the box
  Useful to substract borders from the whitespace to not break the rhythm

@include margin-bottom
  etc.
@include padding
@include padding-top
@include padding-bottom
@include border
@include border-top
@include border-bottom
@include outline

h1 {
   @include font-size(1.5em);
}

// 2nd method

// rhythm() can be used directly

Responsive

https://github.com/canarymason/breakpoint

http://anthonyshort.me/2012/03/media-queries-with-sass

Other

Zocal

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

Etc.

Drupal

Using SASS with Drupal, December 18, 2011

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