line-heightを（AdobeXDのソフトから）自動計算するscssの関数を作りたい

Question

文章のline-heightを自動で割り出すmixinを作りたい

「AdobeXDの行送り」を入力すると自動計算する、scssの関数を作りたいです。

今の式はこれです↓
【line-height = 『Adobeソフト「XD」の行送り数値』 / font-size】

参考サイトはこちらです↓
なんでなん？XDデザインのフォント行間/文字送りとCSSの違い。

しかし、なぜか反映されません。。
「Code pen」というサイトではこちらの結果になりました↓

●　html,scssにエラーはありません
なぜか高さがほぼなくなってしまっています。

原因が特定できず、どなたか詳しい方はいらっしゃいませんか。
よろしくお願いいたします。

補足：
●line-heightを２回指定しているのは、@includeが原因でないことを確かめるためです
●AdobeXDの値はこちら↓

<p class="lh">ラインヘイトがおかしい</p>

/*---------------------------------

line-height = 『Adobeソフト「XD」の行送り数値』 / font-size 
【理由：その都度計算しなくて済むように】

---------------------------------*/
@mixin lh ($lh,$f){
  line-height: calc(#{$lh} / #{$f});
}
/*---------------------------------
---------------------------------*/

.lh {
    @include lh(34px,20);
    line-height: calc(34px / 20);
  }

Comments

[miyabi_pudding]

20の方に、pxを入れてみてはどうでしょう？
calcの計算には、基本的に単位が必要なので

Answer 1

.lh {
  @include lh(34px,20);
    line-height: calc(34px / 20);
  }
}

calc(34px / 20)この値は、line-height: 1.7px; (34pxの20分の1) となります。
おそらくやりたいことは
calc(34 / 20)もしくはcalc(34px / 20px)、line-height: 1.7; ではないでしょうか?

Comments

[fuhixx]

それでした！！！ありがとうございます！！
ご指摘通り、「pxで指定していた」のが間違いだったようです！
無事反映されました！！