Sassでの可変フォントサイズ 関数メモ

概要

この関数は、画面の幅に応じてフォントサイズを動的に調整するために作った。clamp()を使って、最小と最大のフォントサイズの間でフォントサイズが適切に変わるようにする。デフォルトの設定では、320pxから1920pxまでのビュー幅を想定していて、その間でフォントサイズが滑らかに変わるようになっている。

コードメモ

@use "sass:math";
$base-font-size: 16px;

@function space($font-min, $font-max, $viewport-min: 320, $viewport-max: 1920) {
  // 可変部分の割合を計算
  $scale-factor: math.div(($font-max - $font-min), ($viewport-max - $viewport-min));
  
  // 最小・最大のフォントサイズをremに変換
  $font-min-rem: rem($font-min);
  $font-max-rem: rem($font-max);
  
  // vwによる可変部分の計算
  $responsive-vw: $scale-factor * 100 * 1vw;
  
  // 定数部分の計算
  $fixed-part: $font-min-rem - (($viewport-min * $scale-factor) / $base-font-size) * 1rem;
  
  // clampで最小、基準(rem + vw)、最大のフォントサイズを返す
  @return clamp($font-min-rem, $fixed-part + $responsive-vw, $font-max-rem);
}
// 使用例
// font-size: space(16px, 32px, 320px, 1440px);
// 出力結果
// font-size: clamp(1rem, 0.7142857143rem + 1.4285714286vw, 2rem);

コードの解説

@use "sass:math";
Sassの数学計算を使うためにmathモジュールをインポート。特に、div()を使って除算を行う。

$base-font-size: 16px;
ベースとなるフォントサイズを設定。今回はデフォルトを16pxにしている。

@function space()
ここがメインの関数。引数として、$font-min（最小フォントサイズ）、$font-max（最大フォントサイズ）、オプションで$viewport-min（最小ビュー幅）と$viewport-max（最大ビュー幅）を取る。viewport-minとviewport-maxはそれぞれ320pxと1920pxをデフォルトにしている。

可変部分の計算（$scale-factor）
フォントサイズの変動幅とビュー幅の変動幅の比率を計算する。これにより、画面が広くなるにつれてフォントがどのくらい大きくなるかが決まる。

rem単位への変換（$font-min-remと$font-max-rem）
フォントサイズをrem単位に変換する。rem()関数を使って、ピクセルを基準としたフォントサイズを基底フォントサイズに基づいて変換する。

vwによる可変部分の計算（$responsive-vw）
ビュー幅の変動に応じた可変部分をvwで表現。これによって、ビュー幅に依存してフォントサイズが変動する部分を算出する。

定数部分の計算（$fixed-part）
画面が最小サイズのときの固定部分を計算。$font-min-remから、最小ビュー幅時の影響を取り除いた定数部分を作り出す。

clamp()で返す
最後に、clamp()関数で最小フォントサイズ、基準のフォントサイズ（定数部分 + vw）、最大フォントサイズを指定して返す。これによって、画面の幅に応じてフォントサイズが変わるが、極端に小さくなったり大きくなりすぎたりしない。

メモ

この関数は、フォントサイズだけでなく、例えばマージンやパディングなどにも応用できそう。

ビュー幅によるフォントサイズの変動をvwで計算し、固定部分はremを使ってコントロールするのがポイント。

clamp()は、最小・最大値を指定しつつ、中央に可変部分を持たせられるので、柔軟なレスポンシブデザインが可能。

View all articles