clampの中に定義変数を入れられない インターポレーション#{}で解決

目標

メディアクエリを使って～767pxまでのブラウザに対して、フォントサイズをvwで指定したい。
フォントサイズには最小値と最大値を設定して、大きくなりすぎたり小さくなりすぎたりするのを防ぎたい。

clampを使う。

cssの clamp を使用して実現する。

clamp() は CSS の関数で、値を上限と下限の間に制限します。

https://developer.mozilla.org/ja/docs/Web/CSS/clamp

以下のようにscssファイルに記述すれば実現できるが、今回は3.733vwの部分を自動計算させたい。

font-size: clamp(10px, 3.733vw, 20px);  

1. 375pxのブラウザサイズの時に、フォントサイズ14px、の場合のvwを計算するために、以下の変数を定義します。汎用的に使用する目的から変数に単位はつけていません。
   
   $font-base-size-mobile: 14; //px
   $mobile-device-width:375; //px
   
   
2. vwに変換して少数点以下は3桁に制御します。
   
   $mobile-font-size-vw: round($font-base-size-mobile / $mobile-device-width *100 * 1000) / 1000;
   
3. clampを使用して最小値、vw、最大値を設定してコンパイルします。
   *1vwで単位をつけます。
   
   font-size: clamp(10px, $mobile-font-size-vw * 1vw, 20px);
   ↑これだと駄目でした。

上記の方法だと、コンパイルエラーにはならなかったが、$mobile-font-size-vwの部分に値が入ってこない。要はエラー。

$mobile-font-size-vw は値を取得できているのを確認できたので、おそらく問題はclampの中の書き方。
値は取れているので、値だけ素直に表示してくれれば問題ないのです。
そこで演算をしないようにしてくれるインターポレーション #{} の出番です。
インターポレーションは以下のことができます。

• 演算しないようにする
• 演算できない場所で演算する
• アンクォートする（クォートを外す）

参考サイト：Sassの教科書

３．の一行を、インターポレーションを使って書き直します。

font-size: clamp(10px, #{$mobile-font-size-vw * 1vw}, 20px);  

これで無事値の入った状態でコンパイルできました。