带插值变量的数学？

Question

考虑以下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. 

我如何可以生成一个$foo的作品，而且我可以在其他表达式进一步重用？

Answer 1

Sass不能对字符串进行arithemetic操作，只能串接。当您使用插值，你所创建的是一个字符串，看起来像一些：

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

如果你想一个数字，不要使用插值，并且不使用引号。 （如：10）对于整数转换为一个长度（如：10px），用乘法：

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