Question

我是使用compas / susy的新手，我正在使用移动第一种方法构建我的网格。经过大量阅读后，我不明白如何使用指南针断点（$ mobile，$ tablet，$ desktop）与susy。其实我需要设置我的$ 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;

然后是我的容器：

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

}

感谢您的帮助

EDIT1：这段代码

#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或指南针）？

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（13年8月11日）

#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的一部分，你有正确的想法使用它。嵌套在断点混合中的任何东西都会以您设置的大小生效。在那里放置任何你想要改变的大小。

您的#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;
  }
}

我经常采用完全不同的方法 - 将容器设置为仅断点的最大，并使其完全不受影响。但这在很大程度上取决于你的设计。

如何使用指南针断点与susy？

1 个答案: