Sassとclampで可変フォントサイズのmixinを作成

【2023.06.20 追記】
コンパイルされたコードを見直していたところ、気になるところがあったので一部加筆・修正いたしました。

2022年6月16日（日本時間）、IE11の公式サポートが終了します。
この日をもってWeb制作者たちが長年苦労させられてきたIEの呪縛から解き放たれるわけです。

さて、IE対応が必要なくなることで使えるようになる便利なCSSは数多ありますが、今回はSass（SCSS）とclampで可変フォントサイズが簡単に指定できるmixinを作成しました。

これで面倒なレスポンシブのフォントサイズ指定が1行で完結するため、IEの呪縛から解放される喜びを実感できると思います。

表示サンプル

サンプルページは下記URLよりどうぞ。

サンプルHTML

可変フォントサイズのサンプル

SCSS（mixin）

@use "sass:math";
@mixin clamp_fontsize($fs_min, $width_small, $width_large, $fs_max) {
  $preferred_vw_base: math.div(($fs_max - $fs_min), ($width_large - $width_small));
  $preferred_vw: ($preferred_vw_base * 100) * 1vw;
  $preferred_rem: ($width_small * -1 * $preferred_vw_base + $fs_min) * .1rem;
  font-size: clamp($fs_min * .1rem, $preferred_rem + $preferred_vw, $fs_max * .1rem);
}

説明

このmixinは1remを10pxとして作成しています。
理由はこれまでの実制作でhtmlに62.5％を指定している場合が多かったためで、その資産を流用しやすいようにしました。

1行目はDart Sassで除算を使う際に必要な記述です。

【参考サイト】

CSS-Tricks Linearly Scale font-size with CSS clamp() Based on the Viewport

2023.06.20 追記

上記記述の場合、CSSにコンパイルすると以下のように小数点以下が10桁になってしまい、パッと見でイマイチなため3桁になるよう修正しました。

.hoge {
  font-size: clamp(1.2rem, 0.6461538462rem + 0.9615384615vw, 1.6rem);
}

これを小数点以下を3桁になるように修正。

@use "sass:math";
@mixin clamp_fontsize($fs_min, $width_small, $width_large, $fs_max) {
  $preferred_vw_base: math.div(($fs_max - $fs_min), ($width_large - $width_small));
  $preferred_vw: math.div(round(($preferred_vw_base * 100000)), 1000) * 1vw;
  $preferred_rem: math.div(round(($width_small * -1 * $preferred_vw_base + $fs_min) * 100), 100) * .1rem;
  font-size: clamp($fs_min * .1rem, $preferred_rem + $preferred_vw, $fs_max * .1rem);
}

改良版です。コンパイルすると、以下のようになります。

.hoge {
  font-size: clamp(1.2rem, 0.646rem + 0.962vw, 1.6rem);
}

小数点以下が3桁になっていい感じになりました。

SCSSの記述方法

.hoge {
  @include clamp_fontsize(fs_min, width_small, width_large, fs_max);
}

説明

fs_minは最小サイズ、width_smallはブラウザの最小幅、width_largeはブラウザの最大幅、fs_maxは最大サイズを指定します。

例えば、最小・最大フォントサイズをそれぞれ12・16px、ブラウザの最小・最大幅をそれぞれ576・992pxとしたい場合は、@include clamp_fontsize(12, 576, 992, 16);のように指定します。
このように指定すると、以下のようにコンパイルされます。

.hoge {
  font-size: clamp(1.2rem, 0.646rem + 0.962vw, 1.6rem);
}

ちなみにこの576, 992pxは、Bootstrapで使用されているbreakpointになります。

Breakpoints (ブレイクポイント) · Bootstrap v5.0

さいごに

本記事の執筆は2022年6月3日なので、あと2週間ほどでIEの呪縛から解放されることになります。
モダンブラウザ全盛の昨今、2013年にリリースされたブラウザが約9年もの間使われ続けていたことは非常に感慨深いものがあります。

困った時にいつも助けられたpolyfillにも感謝しつつ、終わりと始まりの時を迎えようと思います。