Susy：针对不同的屏幕尺寸使用不同的布局

Question

我正在使用 Susy 构建一个移动优先网站，并希望针对不同的屏幕尺寸使用不同的布局。每个布局都有自己的一组列、列宽和装订线宽度。

我该怎么做？

---

我的尝试：

1.旧的 Susy 方法

在旧的 Susy 中，你会这样做：

$base-font-size: 10px;
$show-grid-backgrounds  : true;


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

body {
background:pink;    
}


@media only screen and (min-width: 480px) {
$total-columns       : 3;
/*$column-width        : 12.567em;
$gutter-width        : 3em;
$gutter-padding      : $gutter-width;*/

body {
background:yellow;  
}


}

@media only screen and (min-width: 600px) {
$total-columns       : 6;
/*$column-width        : 7.500em;
$gutter-width        : 2em;
$gutter-padding      : $gutter-width;*/

body {
background:blue;    
}

}

@media only screen and (min-width: 768px) {
$total-columns       : 6;
/*$column-width        : 7.500em;
$gutter-width        : 2em;
$gutter-padding      : $gutter-width;*/

body {
background:green;   
}

}

@media only screen and (min-width: 960px) {
$total-columns       : 6;
/*$column-width        : 8.833em;
$gutter-width        : 3em;
$gutter-padding      : $gutter-width;*/

body {
background:red; 
}

}

[背景颜色是这样我可以看出它正在工作]

在 New Susy 中，当我这样做时，无论屏幕大小如何，列数始终为 6。它们也不是正确的列大小。

2。断点法 New Susy 有一个新的break point method，它允许您为不同的布局指定不同的列。这就是我使用它的方式：

$base-font-size: 10px;
$show-grid-backgrounds  : true;


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

body {
background:pink;    
}

.layout-primary {
  @include container;
  @include susy-grid-background;
}


@include at-breakpoint(480px 3) {
  .layout-primary {
  @include container;
 }

}

@include at-breakpoint(600px 6) {
  .layout-primary {
  @include container;
 }
}

@include at-breakpoint(768px 6) {
  .layout-primary {
  @include container;
 }
}

当我使用此代码时，无论布局如何，列现在总是停留在 4。您也不能使用此方法指定不同的列宽/填充值。

Susy 太棒了，我知道我误会了什么。但我花了很长时间查看文档并尝试不同的东西，却看不出我做错了什么。

我知道我已经问过这个问题before，但那是针对旧的 Susy 版本的。

Answer 1

您在每个断点在后台看到 4 列的原因是因为您只在 4 列上下文中声明了 @include susy-grid-background;。我认为有人已经提交了一个错误来创建断点/背景快捷方式，所以很快就会出现。与此同时，你必须在任何你调用container 的地方重新调用那个mixin。

@include at-breakpoint(600px 6) {
  .layout-primary {
    @include container;
    @include susy-grid-background;
  }
}

但你是对的，at-breakpoint 此时只允许更改列数。我想扩展它，所以如果你在 github 上提交错误，我会很乐意看看它。与此同时，有一个 with-grid-settings mixin 允许您更改所有基本设置（如果我能尽快获得高级设置，我也希望在那里）。

@include at-breakpoint(600px 6) {
  @include with-grid-settings(6,6em,1em,1em) {
    .layout-primary {
      @include container;
      @include susy-grid-background;
    }
  }
}