Take the 2-minute tour ×

I am getting started with Compass and Susy. My goal is to make my layout adapt to phone, tablet, and desktop screen sizes. In the Susy examples (susy.oddbird.net or SO question), there is a pattern of having the number of columns adapt to the screen size. Specifically, there are nested rules like these:

.container {
  @include container;

  @include desktop {
    @include container;

My questions now: What does the container { @include container } do? And, why is it nested again in the desktop include?

share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

The container mixin establishes the width of your page. You only need to repeat it at different breakpoints if that width should change (as they would with adaptive layouts). If you are using a fluid grid, there is no need for the repetition.

share|improve this answer
add comment

Your Answer


