I'm just new to Susy and testing it now at http://ktee8.com/test/susy_test.html :: Here are excerption for those Susy part (mainly) from my Sass file. I know it might be not the best way. Please let me know if I can make it better.

Susy Responsive Test

@import "compass/typography/vertical_rhythm";
@import "compass/css3";
@import "compass/utilities";

@import "libs/reset";
@import "libs/settings";
@import "libs/mixins";

@import "susy";
@import "sassy-buttons";

.clearfix     { @include clearfix; }
.pie-clearfix { @include pie-clearfix; }
.max-width    { max-width: 100%; height: auto; }

html {
	font-size: 100%;
}

body { 
	color: $base-color;
	font-family: Helvetica, Arial, sans-serif;
}

a {
	color: $action;
	@include force-wrap;					// force text links to wrap
	&:hover, &:focus, &:active {
		color: $action-respond
	}
}

@import "libs/typography"; 
@import "libs/forms";			

section { @extend .clearfix; }
h1 	{ font-weight: 600; }
ol 	{ @include ordered-inside }
ul 	{ @include unordered-inside }


$total-columns  : 4;             
$column-width   : 4em;          
$gutter-width   : 1em;         
$grid-padding   : $gutter-width;  
$computer: 55em 12;
$tablet: 40em 9;
$mobile: 30em 6;

body {
   margin: rhythm(8) rhythm(8);
}

::selection {
   background: rgb(254, 87, 161);
   color: white;
}

button {
   font-family: 'Limelight', cursive;
   @include sassy-button("shiny", 6px, 14px, #cede85, #a7bf35);
   border: 0 none;
   @include leader(6);
}

header {
   @include trailer(2);
   @include clearfix;
}

h1 {   
   @include adjust-font-size-to(25px);
   @include trailer(3, 25px);
   font-family: 'Limelight', cursive;
   position: relative;
   font-weight: 400;
}

h1::before {
  content: '';
  height: rhythm(4, 32px);
  position: absolute;
  top: 5px;
  left: 0;
}

p.top {
   @include adjust-font-size-to(13px);
	@include trailer(4, 13px);
   text-align: right;

   line-height: 24px;
   // I needed this static way to fix a problem
   // line-heingt: 23.984375px end up with 46px 
   // when it cross 2 lines and break the rhythm
}

.lines {
   height: rhythm(1);
   @include trailer(1);
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.container {
   @include container($total-columns, $mobile, $tablet, $computer);
}

.red, .yellow, .blue, .green, .pink, .purple, .black {
   @include span-columns(4, 4);
}

.red {
   background: red;
}

.yellow {
   background: yellow;
}

.blue {
   background: blue;
}

.green {
   background: lightgreen;
}

.pink {
   background: pink;
}

.purple {
   background: purple;
}

.black {
   background: #222;
}

@include at-breakpoint($mobile) {
   // @include container;

   .yellow, .green, .purple {
      @include span-columns(3, 6);
   }

   .blue, .pink, .black {
      @include span-columns(3 omega, 6);      
   }
} 

@include at-breakpoint($tablet) {
   // @include container;

   h1 {
      @include adjust-font-size-to(32px);
      @include trailer(4, 32px);
      padding-left: 30px;
   }

   h1::before {
      border-left: 10px solid #666666;
   }

   button {
      @include leader(10);
   }      

   header {
      @include padding-leader(4);
   }

   .yellow {
      @include span-columns(4, 8);      
   }

   .blue {
      @include span-columns(4 omega, 8);
   }

   .green, .pink {
      @include span-columns(3, 9);
   }

   .purple {
      @include span-columns(3 omega, 9);
   }

   .black {
      @include span-columns(9, 9);
   }
}

@include at-breakpoint($computer) {
   // @include container;
   button {
      position: absolute;
      top: rhythm(5);
      right: 0;
      margin: 0;
   }

   .yellow {
      @include span-columns(4, 12);
   }

   .blue {
      @include span-columns(8 omega, 12);
   }

   .green, .pink, .purple {
      @include span-columns(3, 12);
   }

   .black {
      @include span-columns(3 omega, 12);
   }
}