Matematyka ze zmiennymi interpolowanymi?

Question

Rozważmy następujący 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. 

Jak mogę wygenerować $foo że działa i że można ponownie wykorzystać również w innych wyrażeń?

Answer 1

Sass nie może wykonywać operacji arytemetycznych na łańcuchach, a jedynie konkatenacji. Podczas korzystania z interpolacji, co stworzyliśmy to ciąg wygląda jak numer:

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

Jeśli chcesz numer, nie używać interpolacji i nie używać cytatów. (Np.) Do konwersji 10 liczbę całkowitą do długości (. Np 10px), użyj mnożenia:

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