Susy compass 使用带断点的网格设置的示例

我试图找出如何基于断点使用不同的网格设置，但无法使其工作。这是我的密码。我正在使用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; }
  };
}

---

到底是什么不起作用？是否对不同的断点没有任何更改，或者只是对背景网格图像没有任何更改？我猜是后者。如果希望后台响应新设置，则需要使用这些设置重新声明后台：

@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;
    }
  };
}

---

当然，我认为你可以更容易地用它，而不是回应。但这是另一个问题。：）

您能否为每个“布局”使用新的网格设置变量（12,4em、1.51em、1em），并将其转换为sass变量，以便于维护？（在断点处使用）。