将with-grid-settings与断点一起使用的示例

Question

我试图弄清楚如何使用基于断点的不同网格设置，但无法使其工作。这是我的代码。我正在使用respond to mixin进行媒体查询。

$breakpoints: 'screenSmall' 480px 768px,
              'screenMedium' 768px 1279px,
              'screenXlarge' 1441px;                                                   

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

[role="main"] {
  @include container($total-columns);
  background: #aaa;
  @include susy-grid-background;
}

@include respond-to('screenSmall')
  @include with-grid-settings(8,4em,1.5em,1em) {
    [role="main"] { @include container; }
  };
}

@include respond-to('screenMedium')
  @include with-grid-settings(12,4em,1.5em,1em) {
    [role="main"] { @include container; }
  };
}

Answer 1

到底是什么不起作用呢？对于不同的断点，是否根本没有变化，或者仅仅是背景网格图像没有变化？我猜是后者。如果希望背景响应新设置，则需要使用这些设置重新声明背景：

@include respond-to('screenSmall')
  @include with-grid-settings(8,4em,1.5em,1em) {
    [role="main"] { 
      @include container; 
      @include susy-grid-background;
    }
  };
}

@include respond-to('screenMedium')
  @include with-grid-settings(12,4em,1.5em,1em) {
    [role="main"] { 
      @include container; 
      @include susy-grid-background;
    }
  };
}

当然，我认为使用at-breakpoint比使用respond to更容易做到这一点。但这是一个不同的问题。:)