はじめに
本記事の要約
rClamp関数を、モダン環境でも安全に動作するようアップデートしました。
calc()対応や$baseFontSize引数の追加により、保守性・再利用性を高めた改良版です。
こんなことで困っていませんか？
- rClampを使っていたら、Sassのコンパイルで除算エラーが出るようになった
-
html { font-size: 62.5%; }の環境で、rClampをうまく使いたい -
clamp()を手計算するのが面倒なので、Sassで自動化したい
背景
最近は、レスポンシブ対応の中でも、フォントサイズや余白を画面幅に応じて滑らかに変化させる流動的なタイポグラフィ (Fluid Typography) の設計が注目されています。
その中心的な仕組みが、CSSの clamp() 関数です。
clamp()関数を使用した仕組みとして、しょーごさんのrClampはとても優れた設計です。
しかし、Dart Sass以降の除算仕様変更（/が非推奨）に対応しておらず、
rem基準を変更するプロジェクトでは手直しが必要でした。
そこで、これらの課題を解決する形で「rClamp改良版」を作成しました。
既存コードの思想を尊重しつつ、モダン環境で安全に動作するよう最適化しています。
※本記事は shogo-logさんの記事 を参考に、Dart Sass環境で安全に利用するための実装方法を加えた内容です。
目次
この記事で行うこと
-
clamp() を使った流動的なサイズ指定をSass関数で自動化
-
ベースフォントサイズの変更に対応
-
Sassモジュール構文（
@use）への対応 -
既存のrClamp関数をSass 2.xに対応させる
改良版 rClamp 関数（完成コード）
Sassの除算演算子/はDart Sass 2.x以降で非推奨になり、代わりにmath.div()またはcalc()を使う必要があります。
ここでは、calc()を採用することでブラウザのCSS計算に委ね、より柔軟かつ将来互換性の高い実装にしています。
// @use "sass:math";
// 必須ではありませんが、もし他のSass関数やmath.div()を使うなら必要になります。
@function rClamp($min, $max, $minViewport: 375, $maxViewport: 1440, $baseFontSize: 16) {
// すべての計算をCSSのcalc()に任せることで、Sassの@use "sass:math"を不要にし、柔軟性を高めています。
$vwScale: calc(($max - $min) / ($maxViewport - $minViewport)); // vw単位でのスケールを計算
$baseOffset: $min - $minViewport * $vwScale; // 基準となる最小値からのオフセットを計算
$minRem: calc($min / $baseFontSize); // 最小値をremに変換
$maxRem: calc($max / $baseFontSize); // 最大値をremに変換
$baseOffsetRem: calc($baseOffset / $baseFontSize); // オフセットをremに変換
$vwScaleRem: $vwScale * 100; // vwスケールを調整
@return clamp(#{$minRem}rem, #{$baseOffsetRem}rem + #{$vwScaleRem}vw, #{$maxRem}rem);
}
関数の解説
1. $min / $max
画面が最小サイズの時の値（px）と最大サイズの時の値を指定します。
font-size: rClamp(14, 24);
→ 画面幅375pxでは14px、1440pxでは24pxになります。
2. $minViewport / $minViewport
どの範囲でスケールさせるかを決めます。
デフォルト値はスマホ375px〜PC1440pxの範囲。
font-size: rClamp(16, 32, 320, 1920);
このように変更も可能です。
3. $baseFontSize
デフォルトでは16px。
もしプロジェクトで html { font-size: 62.5%; } のように10px基準にしている場合は、次のように指定します。
font-size: rClamp(16, 24, 375, 1440, 10);
これでrem単位変換も正確になります。
出力されるCSS
font-size: clamp(0.875rem, 0.625rem + 1.465vw, 1.5rem);
/* 375px時: 14px → 0.875rem
1440px時: 24px → 1.5rem
それ以外の幅ではvwを使ってスムーズに補完される */
初期設定で最小フォントサイズ14px、最大フォントサイズ24pxを指定した場合、
このように出力されます。
この様に最小値〜最大値の間をvwでスムーズに補完します。
FLOCSSなどへの応用例
FLOCSSやBEMのような構成を採用している場合は、
functions/_rClamp.scss として定義し、共通関数として @use で読み込むのがおすすめです。
@use "../functions/rClamp" as *;
.p-hero__title {
font-size: rClamp(20, 36);
}
これにより、フォントサイズの調整ロジックを1ヶ所に集約できます。
改良ポイントまとめ
| 項目 | 改良内容 | 効果 |
|---|---|---|
| Sass除算対応 |
/ から calc() に変更 |
Dart Sassでの計算エラーを防止 |
| $baseFontSize 追加 | 任意の基準フォントサイズを引数で指定可能 | 基準フォント変更にも対応 |
| コメント整備 | 計算手順を明記 | チーム開発・教育用にも使いやすい |
全体のまとめ
CSSのclamp()は非常に強力ですが、都度手計算して指定するのは手間です。
今回のように関数化しておくことで下記の効果があります。
-
デザインのスケール感を自動で調整
-
コードの可読性・保守性を向上
-
複数デバイスでも破綻しないフォント設計が可能
FLOCSSやBEMと組み合わせると、「再現性よりも保守性を優先する設計」にもマッチします。
参考リンク
本記事で紹介したrClamp関数は、日々のフロントエンド開発で得た知見を整理したものです。
コードの改良案やフィードバックがあれば、ぜひコメントで教えてください！
この記事が役立ったら、いいね・ストックしていただけると励みになります！