Sass：演算させずに出力する

.box {
    $font-size: 13px;
    $line-height: 25px;
    font: $font-size/$line-height;
}

例えば上記の場合、CSS的な指示としては font プロパティ一つで font-size と line-height を設定したい書き方なのですが、「/」の演算子が入っているため割る形になり、CSSは下記のように演算されて出力されてしまいます。

.box {
  font: 0.52;
}

そこで下記の記法で、変数を数値でなく文字列として見て出力します。

.box {
    $font-size: 13px;
    $line-height: 25px;
    font: #{$font-size}/#{$line-height};
}

CSS出力は下記になります。

.box {
  font: 13px/25px;
}

「#{}」で変数を囲うことで、プロパティ内で文字列として出力することができます。