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

Question

我对这整个sass / compass / susy的事情都很陌生，并试图遵循这些内容：http://susy.oddbird.net/demos/magic/

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

  

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

这是我的设置：

$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不接受任何断点参数，例如min-width（虽然这是一个有趣的想法）。您需要使用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);
  }
}