Математика с интерполированными переменными?

Рассмотрим следующий вопрос:

$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 который работает, и что я могу повторно использовать его в других выражениях?

ОТВЕТЫ

Ответ 1

Сасс не может выполнять арифметические операции над строками, только конкатенация. Когда вы используете интерполяцию, то, что вы создали, представляет собой строку, которая выглядит как число:

@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