Как предотвратить разделение при использовании переменных, разделенных косой чертой в значениях свойств CSS

Question

Когда я пытаюсь использовать переменные для части font-size и line-height части сокращенного свойства шрифта, Sass выполняет деление вместо разделения двух значений косой чертой.

@mixin test($fontsize, $lineheight) { font: $fontsize/$lineheight sans-serif; }

#my-font { @include test(14px, 20px); }

В настоящее время выводится:

#my-font { font: 0.7 sans-serif; }

Как я могу сказать Sass прекратить деление?

Answer 1

Используйте нотацию #{} с интерполяцией для обработки ваших переменных как строк. Поскольку Sass не может выполнять арифметику со строками, / обрабатывается как буквенная косая черта вместо оператора деления:

@mixin test($fontsize, $lineheight) {
    font: #{$fontsize}/#{$lineheight} sans-serif;
}

Answer 2

Ответ BoltClock работает в большинстве случаев, однако, если переменная $fontsize является функцией, например, $fontsize: rem-calc(10px), она будет выводиться в виде строки.

Более пуленепробиваемый способ - интерполировать косую черту.:

@mixin test($fontsize, $lineheight) {
    font: $fontsize #{"/"} $lineheight sans-serif;
}