帶插值變量的數學？

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