Адаптивная сетка Susy 2.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>


susy-sass susy
person byrdr    schedule 03.10.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Здесь у вас есть несколько проблем, но в основном у вас просто слишком много кода. Вы не хотите использовать как container, так и span для одного и того же элемента (один переопределяет другой), и то же самое верно для установки span, а затем 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 и высокую специфичность.

person Miriam Suzanne    schedule 15.10.2014