sass - How to prevent division when using variables separated by a slash in CSS property values

Question

When I try to use variables for the font-size and line-height portion of the font shorthand property, Sass performs division instead of separating the two values with a slash.

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

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

This currently outputs:

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

How can I tell Sass to stop doing division?

Answer 1

Use the #{} interpolation notation to treat your variables as strings. Since Sass cannot perform arithmetic on strings, the / gets treated as a literal slash instead of the division operator:

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