0

我开始使用 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;}

 }

这也可以，但我不能像第一个示例那样使所有布局都流动。例如，450px 宽的 4 列布局不会填满视口。同样的情况发生在 768px，8 列不填满视口。我希望布局始终填充可用宽度，如第一个示例所示，并根据定义的断点更改列。

这是正常的 Susy 行为还是有可能以其他方式做到这一点？

对不起，如果这是一个新手问题，但我才刚刚开始，我想在实际项目中使用 Susy 之前先把事情弄清楚。

谢谢。

4

1 回答 1

1

这是我处理响应式网格的方法，也许会对您有所帮助。

我为每个断点定义了一些变量（我喜欢按列数命名），例如：

// 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。

如果你想级联到一个更大的断点，那么将第三个参数放在 on 上at-breakpoint()，或者将其设置为比下一个级别更高的值。还要确保您设置set-container-width而不是container在断点声明中。查看Susy 文档上的 set-container-width

希望这对您有所帮助。祝你好运。

于 2013-07-31T04:10:25.207 回答