Question

我开始使用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之前先说清楚。

感谢。

Answer 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等。

如果要级联到更大的断点，请在at-breakpoint()上取消第三个参数，或将其设置为高于下一级别的值。另外，请确保在断点声明中设置set-container-width而不是container。查看set-container-width on Susy docs

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

Susy，魔术网格和专栏

1 个答案: