Math with interpolated variables?

Question

Consider the following sass:

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

How can I generate a $foo that works, and that I can reuse further in other expressions?

Answer 1

Sass cannot perform arithemetic operations on strings, only concatenation. When you use interpolation, what you've created is a string that looks like a number:

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

If you want a number, do not use interpolation and do not use quotes. For converting an integer (eg. 10) to a length (eg. 10px), use multiplication:

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