title: How do I use Susy-compass 'at-breakpoint'?
body: <pre><code>&lt;section class="container"&gt;
    &lt;div class="content&gt;
      &lt;article&gt;MainContent&lt;/article&gt;
      &lt;aside&gt;SideBar&lt;/aside&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  
  
  .content {
    @include container;
    @include at-breakpoint(0 768px 10) {
      @include container(10, 10);
  }
  article {
    @include span-columns(9, $total-columns);
  }
  aside.sidebar {
    @include span-columns(3 omega, $total-columns);
  }
  </code></pre>
  
  <p>This is my html structure and susy-compass. I'm trying to build a responsive web template using Susy grid.
  I want 12 columns of 960px for desktop, 10 columns of 768px for tablet and 4 columns of 320px for mobile but I just can't figure it out. I've been trying to @include at-breakpoint at 768px with 10 columns but the default 12 columns still not changing to 10 columns.</p>
  
  <p>Any ideas? and any good suggestions for building a template like this?</p>