Susy, волшебная сетка и столбцы

Я начинаю использовать Susy и хочу кое-что сделать, но не знаю как, хотя я читаю документацию Susy и онлайн-руководства.

У меня есть этот html:

<div class="page">
  <nav>nav</nav>
  <div class="main">
    <div class="summary">
      summary
    </div>
    <div class="content">
      content
    </div>
  </div>
  <footer>footer</footer>
</div>

и эти настройки Susy:

$total-columns: 12;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;

$show-grid-backgrounds: true;

@include border-box-sizing;

// breakpoint variables
$M: 30em;
$L: 50em;

и этот scss:

.page {

@include container;
@include susy-grid-background;

nav {
    @include at-breakpoint($M) {
        @include span-columns(2,12);    
    }
}

.main {
    @include at-breakpoint($M) {
        @include span-columns(10 omega,12); 
    }
    .summary {
        @include at-breakpoint($L) {
            @include span-columns(2 omega,10);  
        }   
    }
    .content {
        @include at-breakpoint($L) {
            @include span-columns(8,10);    
        }   
    }

}
footer {clear: both;}

Это работает, как и ожидалось, контент полностью плавный с максимальной шириной. Однако мне бы хотелось того же поведения, но начиная с макета из 4 столбцов, а затем переходя на 8 столбцов, а затем на 12 столбцов.

Я так делаю:

$total-columns: 4;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;

$show-grid-backgrounds: true;

@include border-box-sizing;

// breakpoint variables
$M: 30em;
$L: 50em;

и scss:

.page {

@include container;
@include susy-grid-background;

// Now create a media-query breakpoint at the min-width of 30em and use a larger grid and modify the layout
    @include at-breakpoint($M 8) {
    // This will create a new container with a total of 8 columns
      @include container;
      @include susy-grid-background;
     // Now modify the inner elements to their new home
     nav { @include span-columns(2,8); }
       .main { @include span-columns(6 omega,8); }
     }

    @include at-breakpoint($L 12) {
    // This will create a new container with a total of 12 columns
     @include container;
     @include susy-grid-background;
     // Now modify the inner elements to their new home
     nav { @include span-columns(2,12); }
    .main { 
      @include span-columns(10 omega,12); 
      .content {
        @include span-columns(8,10); 
      }
      .summary {
        @include span-columns(2 omega,10); 
      }
    }

  }

footer {clear: both;}

 }

Это тоже работает нормально, но я не могу сделать все макеты жидкими, как в первом примере. Например, при ширине 450 пикселей макет из 4 столбцов не заполняет область просмотра. То же самое происходит с 768px, 8 столбцов не заполняют область просмотра. Я бы хотел, чтобы макет всегда заполнял доступную ширину, как в первом примере, а также менял столбцы в соответствии с определенными точками останова.

Это нормальное поведение Susy или можно сделать это по-другому?

Извините, если это вопрос новичка, но я только начинаю и хотел бы прояснить ситуацию, прежде чем использовать Susy в реальных проектах.

Спасибо.


susy-compass
person user2632763    schedule 30.07.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот как я работаю с адаптивными сетками, может быть, это вам поможет.

У меня есть несколько переменных, которые я определяю для каждой точки останова (которую я люблю называть по количеству столбцов), например:

// 6 Columns -------------------------------------------------------------------
$six-gut-width : .5rem;
$six-padding   : 0;
$six-width     : 6 * $column-width + 5 * $six-gut-width + $six-padding * 2;

// 8 Columns -------------------------------------------------------------------
$eight-width : 8 * $column-width + 7 * $gutter-width + $grid-padding * 2;

Таким образом, у меня есть как фактическая ширина, так и количество столбцов для использования в моих at-breakpoint вызовах.

Тогда мои точки останова распадаются следующим образом:

@include at-breakpoint($six-width 6 $eight-width) {
    // Breakpoint specific scss
    .page { set-container-width(6); }
}

Мне нравится хранить материалы, относящиеся к точкам останова, в отдельной части в каталоге точек останова (но вам это не обязательно), то есть: breakpoints/_6-cols.scss, breakpoints/_8-cols.scss и т. Д.

Если вы хотите каскадировать на более крупную точку останова, оставьте третий параметр на at-breakpoint() или установите для него значение выше следующего уровня. Также убедитесь, что вы устанавливаете set-container-width вместо container в объявлениях точки останова. Ознакомьтесь с set-container-width в документации Susy

Надеюсь, это вам поможет. Удачи.

person Jesse Nobbe    schedule 31.07.2013