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

My 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

ここにはいくつかの問題がありますが、主にコードが多すぎます。同じ要素でcontainerとの両方を使用したくありません(一方が他方をオーバーライドします)。 a を設定してから cssを設定する場合も同様です。必要なレイアウトを実装するにはいくつかの方法がありますが、私が見たものに基づいて推奨する方法は次のとおりです。spanspanwidth

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
}

補足として、DOM に一致するようにすべてをネストすることは、Sass では悪い習慣と見なされています。ネスティングは必要な場合に優れていますが、あまり使用しない方が良いです — ネスティングが深いと CSS セレクターが長くなり、特異性が高くなるためです。

于 2014-10-15T21:16:30.460 に答える