susy-compass - 无法在 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不接受像 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);
  }
}