補間された変数を含む数学？

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は、文字列に対して演算処理を実行できません。連結のみです。あなたは補間を使用する場合は、あなたが作成したことは数のように見えるという文字列です：

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

あなたは数が必要な場合は、補間を使用していないと、引用符を使用しません。 （例えば10）：

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