Matematica con variabili interpolate?

Question

Si consideri il seguente 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. 

Come faccio a generare un $foo che funziona, e che posso riutilizzare ulteriormente in altre espressioni?

Answer 1

Sass non può eseguire operazioni aritmetiche su stringhe, solo concatenazione. Quando si utilizza l'interpolazione, quello che hai creato è una stringa che sembra come un numero:

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

Se volete un numero, non utilizzare l'interpolazione e non utilizzare le virgolette. (Es. 10) per convertire un intero ad una lunghezza (es. 10px), utilizzare la moltiplicazione:

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