Can't apply/compile min-width at breakpoints for Susy - susy-compass

Question

I'm pretty new to this whole sass/compass/susy thing and tried to follow these intructions: http://susy.oddbird.net/demos/magic/
But I can't get the min-width for the breakpoint working.
When I add the the values to $computer and $tablet, like shown below, it runs into the following error.
Syntax error: (48em 16) is not a number for round'
on line 59 of /susy/_functions.scss, inspan-columns'
Here's my setup:
$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);
}
But if I use it this way...
.test {
#include span-columns(4, 16);
}
...everything works as expected.
Any suggestion what's wrong or has to be done?

Answer 1

span-columns doesn't take any breakpoint arguments like min-width (though it's an interesting idea). You need to use at-breakpoint in order to create your breakpoint, and then use span-columns inside of that:
.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);
}
}