如何在 susy 中使用指南针断点？

Question

我是使用 compas / susy 的新手，我正在使用移动优先方法构建我的网格。 经过大量阅读，我不明白如何在 susy 中使用指南针断点（$mobile、$tablet、$desktop）。 实际上我需要设置我的 $container 宽度：

  //*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;

那么对于我的容器：

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

对于元素之后，我认为这可能是：

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

}

感谢帮助

编辑1： 这段代码

#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{}
     }
}

萤火虫给我：

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

为什么我的断点没有被应用？ 是否存在 mixin 或类似的东西来使图像响应（susy 或 compass）？

EDIT2：仍在测试并且看起来效果更好，但是容器没有像您的建议那样居中。但是为什么？我面对的是基本的容器设置，我的列设置也不会覆盖移动优先设置。

     #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：另一个看起来更好的测试，我认为我的断点已应用但最大宽度仍然是 49em 而不是 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);}...}

在这一点上，我认为@include set-container-width($desktop); 更适合容器宽度的变化，@include span-columns($desktop); 更适合嵌套在容器中的元素。

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);}
               } 
}

渲染不一样，具有相同的网格设置，

 #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

是的。 at-breakpoint 实际上是 Susy 的一部分，你有正确的想法来使用它。任何嵌套在 at-breakpoint mixin 中的东西都会影响你设置的大小。把任何你想改变的东西放在那里。

您的#header 示例效果很好，但可以简化它。 at-breakpoint 更改所有嵌套项的默认上下文，这意味着您无需将 $desktop 传递给子项（现在是默认值）。

对于容器，您有多种选择。首先是简单地在每个断点内重复调用container 和susy-grid-background。这会重复一些输出，所以如果你愿意，可以通过一些方法来简化它：

// 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;
  }
}

我经常采用完全不同的方法 - 将我的容器设置为仅我的最大断点，并让它在其以下完全流动。但这在很大程度上取决于您的设计。