Susy 2.0响应式网格

Question

我将布局从Susy 1转换为Susy 2.0，并且有些工作方式与预期不同。我在这里做错了吗？我希望容器跨越页面的宽度，并使一半宽度的列位于页面的中间。在该列的内部，3个等距列（红色，白色和蓝色）。我不确定css是如何在屏幕截图中编译的。

header {  
.fullheight {
    @include backImage('../images/img_hero_brightspace-homepage.png');
    @include container(100%);
    .hgroup {
      padding: 150px 0;
      text-align: center;
      h3{
        @include span(8);
        display: block;
        font-weight: $light;
      }
    } //hgroup
    section{
      @include container;
      @include span(6 at 3 of 12);
      .serviceBox{
      @include span(2 of 6);
        width:100%;
        height:40px;
        background-color: white;
      }//serviceBox
       .volunteerBox{
      @include span(2 of 6);
        width:100%;
        height:40px;
        background-color: blue;
      }//volunteerBox
      .partnerBox{
      @include span(2 of 6);
        width:100%;
        height:40px;
        background-color: red;
      }//partnerBox
    }
  } //fullheight
} //header

My Susy Template

$susy: (  
  columns: 12,
  container: 60em,
  gutters: 1/4,
  gutter-position: inside
);

我的HTML

<article class="fullheight">
  <div class="hgroup">
    <h3>Providing help to residents of Greater Cincinnati when challenges invade their lives</h3>
   </div>

  <section>
    <div class="serviceBox">

    </div>
    <div class="volunteerBox">

    </div>
    <div class="partnerBox">

    </div>       
  </section>      
</article>   

Answer 1

这里有一些问题，但主要是你的代码太多了。您不希望在同一元素上同时使用container和span（一个覆盖另一个元素），设置span然后设置css {{1 }}。有几种方法可以实现您想要的布局，但这是我根据我所看到的建议：

width

作为旁注，Sass认为嵌套所有内容以匹配DOM是不好的做法。在需要时嵌套很棒，但是使用它越少越好 - 因为深度嵌套会创建长CSS选择器，并且具有高度的特异性。