无法在 Susy 的断点处应用/编译最小宽度

Question

我对整个sass/compass/susy很陌生，并尝试遵循以下说明：http://susy.oddbird.net/demos/magic/

但我无法获得断点工作的最小宽度。当我将值添加到$computer和$tablet时，如下所示，它会遇到以下错误。

语法错误：（48em 16）不是round' on line 59 of /susy/_functions.scss, in跨度列的数字

这是我的设置：

$total-columns  : 4;             
$column-width   : 4em;            
$gutter-width   : 1em;            
$grid-padding   : $gutter-width;  
// breakpoint var
$tablet: 24em 8;
$computer: 48em 16;
// test container
body {    
    @include container($total-columns, $tablet, $computer);
}
// test element
.test {
    @include span-columns(4, $computer); 
}

但如果我用这种方式。。。

.test {
    @include span-columns(4, 16); 
}

一切如预期。

有什么建议吗？

Answer 1

span-columns不接受任何断点参数，如最小宽度（尽管这是一个有趣的想法）。您需要使用at-breakpoint来创建断点，然后在其中使用span-columns：

.test {
  @include at-breakpoint($computer) {
    // anything inside here will happen at your 48em breakpoint, on a 16-column grid.
    // no need to pass a context to span-columns when that context is the full grid.
    @include span-columns(4);
  }
}