sass - Math with interpolated variables? -

consider following sass:

$font-size: 18;                  $em: $font-size;  $column: $font-size * 3;        // column-width of grid in pixels $gutter: $font-size * 1;        // gutter-width of grid in pixels  $gutter-em: #{$gutter / $em}em; // gutter-width in ems. $column-em: #{$column / $em}em; // column-width in ems;  $foo = $gutter-em / 2; // results in value "1em/2". :( $bar = ($gutter-em / 2); // doesn't work either, same above. 

how can generate $foo works, , can reuse further in other expressions?

sass cannot perform arithemetic operations on strings, concatenation. when use interpolation, you've created string looks number:

@debug type-of(#{10px});         // string @debug type-of('10px');          // string @debug type-of(unquote('10px')); // string @debug type-of(10px);            // number 

if want number, not use interpolation , not use quotes. converting integer (eg. 10) length (eg. 10px), use multiplication:

$gutter-em: ($gutter / $em) * 1em; @debug type-of($gutter-em);      // number