0

我正在将布局从 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

我的 Susy 模板

$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>

4

1 回答 1

2

您在这里有一些问题，但主要是您的代码太多。您不想在同一个元素上同时使用containerand span（一个覆盖另一个），设置 aspan然后是 css也是如此width。有几种方法可以实现您想要的布局，但根据我所看到的，这是我推荐的一种：

section{
  @include container(6);

  .serviceBox{
    @include span(2 of 6);
    height:40px;
    background-color: white;
  }//serviceBox

  .volunteerBox{
    @include span(2 of 6);
    height:40px;
    background-color: blue;
  }//volunteerBox

  .partnerBox{
    @include span(2 of 6);
    height:40px;
    background-color: red;
  }//partnerBox
}

作为旁注，在 Sass 中嵌套所有内容以匹配 DOM 被认为是不好的做法。嵌套在你需要的时候很棒，但你使用的越少越好——因为深度嵌套创建了长的 CSS 选择器和高特异性。

于 2014-10-15T21:16:30.460 回答