How to use compass breakpoint with susy?

Question

i'm new on using compas / susy and i'm building my grid with the mobile first approach. after lot of reads, i don't understand how to use compass breakpoints ($mobile,$tablet,$desktop) with susy. Actually i need to set my $container width:

  //*Réglage de la grille de Susy - approche mobile-first
$total-columns: 8;             // nombre de colonnes de la grille de base
$column-width: 4em;            // largeur de chaque colonnes
$gutter-width: 1em;            // taille de la gouttière entre colonnes
$grid-padding: $gutter-width;  // grid-padding equal to gutters

//Réglage du nombre de colonnes pour at-breakpoint() mixin 
// qui simplifie les media-queries
$mobile   : 4;
$tablet   : 10;
$desktop  : 14;

then for my container :

#general{
@include container;
@include susy-grid-background; 
     @include at-breakpoint($desktop) {
         @include ???
     }
 }

after for elements i think this could be:

#header{
    @include  @include span-columns(3);
    @include at-breakpoint($desktop) {
         @include span-columns(13, $desktop);
         @include prefix(3, $desktop);

}

thanks for help

EDIT1: whith this code

#general{
    //Approche mobile-first,réglage pour mobile
    @include container;
    @include susy-grid-background;
    #header{}
    #header-inner{}
    #content-global{}
    #left-content{}
    #content-inner{}
    #right-content{}
    #footer{}
    @include at-breakpoint($desktop) {/*    //Dimensions pour les pc*/
           @include set-container-width;

        #header{@include span-columns($desktop,$desktop);}
        #header-inner{}
        #content-global{@include span-columns($desktop,$desktop);}
        #left-content{@include span-columns(2 alpha,$desktop);}
        #content-inner{@include span-columns(10,$desktop);}
        #right-content{@include span-columns(2 omega,$desktop);}
        #footer{@include span-columns($desktop,$desktop);}
     }
     @include at-breakpoint($tablet) {/*     //Dimensions pour les tablettes*/
            @include set-container-width;

         #header{}
         #header-inner{}
         #content-global{}
         #left-content{}
         #content-inner{}
         #right-content{}
         #footer{}
     }
}

firebug give me:

@media (min-width: 36.75em)
#general {
max-width: 49em; => applied
}
@media (min-width: 51.75em)
#general {
max-width: 69em;=> not applied
}

why my breakpoint isn't applied ? does exist a mixin or something like that to make images responsive (susy or compass)?

EDIT2: still testing and seem this work better but the container isn't centered as it was with your suggestion.but why ? i face to the basic container setting, and my columns settings doesn't override mobile-first setting too.

     #general{
                //Approche mobile-first,réglage pour mobile
                @include container;
                @include susy-grid-background;
                        @include at-breakpoint($desktop) {/*    //Dimensions pour les pc*/
                @include span-columns($desktop);
                #header{@include span-columns($desktop);}
#left-content{@include span-columns(2 alpha,$desktop);}...}

EDIT3: another test that seem better, i think my at-breakpoint are applied but the max width is still 49em instead of 69em..

     #general{
                //Approche mobile-first,réglage pour mobile
                @include container;
                @include susy-grid-background;
                        @include at-breakpoint($desktop) {/*    //Dimensions pour les pc*/
                 @include set-container-width($desktop);
                #header{@include span-columns($desktop);}
#left-content{@include span-columns(2 alpha,$desktop);}...}

at this point, i think that @include set-container-width($desktop); is better for the container width changing, and @include span-columns($desktop); for the elements nested in the container.

EDIT4(08/11/13)

#header {
     .headHaut {@include span-columns($mobile);
                .logoHead {  @include set-container-width;}
                .menuImg {  @include set-container-width;}
     }
     .headBas {@include span-columns($mobile);
               .site-slogan{@include span-columns($mobile);}
                    }                
@include at-breakpoint($desktop) {/*    //Dimensions pour les pc*/
 .headHaut {@include set-container-width;
                .logoHead { @include span-columns(3,$desktop);}
                .menuImg {  @include span-columns(7 omega,$desktop);}
     }
     .headBas {@include span-columns($desktop);
               .site-slogan{@include span-columns(7,$desktop);}
               } 
}

doesn't render the same as,with the same grid settings,

 #header {
         .headHaut {@include span-columns($mobile);
                    .logoHead {  @include set-container-width;}
                    .menuImg {  @include set-container-width;}
         }
         .headBas {@include span-columns($mobile);
                   .site-slogan{@include span-columns($mobile);}
                        }                
    @include at-breakpoint($desktop) {/*    //Dimensions pour les pc*/
#header{
     .headHaut {@include set-container-width;
                    .logoHead { @include span-columns(3,$desktop);}
                    .menuImg {  @include span-columns(7 omega,$desktop);}
         }
         .headBas {@include span-columns($desktop);
                   .site-slogan{@include span-columns(7,$desktop);}
                   } 
  }  }

Answer 1

Yes. at-breakpoint is actually part of Susy, and you have the right idea for using it. Anything nested inside the at-breakpoint mixin will take affect at the size you set. Put anything in there that you want to change at that size.

Your #header example will work great, but could be simplified it. at-breakpoint changes the default context for all nested items, meaning you don't need to pass $desktop to the children (it's now the default).

For the container, you have several options. The first is simply to repeat your call to container and susy-grid-background inside each breakpoint. That duplicates some output, so there are ways to simplify it, if you like:

// a shortcut for setting multiple containers
// - simplest version, but doesn't include changes to the grid background
#general { @include container($total-columns, $desktop); }

// more control, with optimal output
// - use set-container-width, because width is the only thing you need to change
// - you can add the grid background at each breakpoint as well
#general {
  @include container;
  @include at-breakpoint($desktop) {
    @include set-container-width;
  }
}

I often take a different approach entirely - setting my container to only the largest of my breakpoints, and letting it be completely fluid below that. But that depends a lot on your design.