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

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

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

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

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

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

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

Ответ 1

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

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

Ответ 2

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

Более пуленепробивным способом является интерполяция косой черты:

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