BLOG

ブログ

2025年07月01日

【clamp関数を効率化！】Sassの自作functionで面倒な計算を省略しよう【レスポンシブサイズ管理をもっと快適に】

IEの対応が不要になった最近のWeb制作では、clamp関数を使ってフォントサイズや余白をレスポンシブに調整する機会がとても増えました。私もモバイルメインのLPでよく活用しています。

ただ、clamp関数はとても便利ですが、基準となる画面幅を決めて…各サイズの計算をして…clamp()の中に式を組み立てて…と少し面倒なところもありますよね。さらに、サイト全体の基準幅を変更したときに、いろんな場所の値を手作業で修正するのも正直つらい…。

ということで、業務を効率化するために今回Sassのfunctionを作成しました。
この記事では、作成したfunctionのコードと使い方をご紹介します。同じような悩みを持つ方の参考になればうれしいです！

このfunctionで出来る事

✅ clamp関数の計算を自動化できるため、計算不要
✅ 基準幅が変わっても数値が自動的に変更される
✅ 基準幅を1か所で管理できるため、自分以外の人がファイルを見たときに「どの幅基準で作られているのか」を明示できる
✅ 単位もrem・em・px・vw好きに設定できる
✅ 最小値と最大値も自由に決められる

実際のfunctionコード

入力した値が中間値となり、基準幅をもとにvw化されます。
$base-width=基準幅
$max-scale=最大値の倍率(2と設定すれば、clampの最大値は入力した値の2倍)

html {
  font-size: 62.5%;
}
// ========================================
// clamp関数を自動計算するfunction
// ・$base-widthと$max-scaleの数値を変更するだけで
//  clampの数値を一括書き換えき可能
// 単位は px/rem/em
// ・詳しくは「使用例」を参照
// ========================================

// グローバル設定
$base-width: 1000 !default;
$max-scale: 2 !default;

@function clamp-value($base-px, $min-unit: px, $max-unit: null, $min-value: 0, $max-value: null) {
  $base-value: if(
    unit($base-px) == "px",
    $base-px / 1px,
    if(unit($base-px) == "rem", ($base-px / 1rem) * 10, $base-px)
  );

  $center: ($base-value / $base-width) * 100vw;

  $max-unit: if($max-unit == null, $min-unit, $max-unit);

  $min: if(
    $min-value == 0,
    0 + $min-unit,
    if($min-unit == rem or $min-unit == em, ($min-value / 10) + $min-unit, $min-value + $min-unit)
  );

  $max: if(
    $max-value == null,
    if(
      $max-unit == rem or $max-unit == em,
      ($base-value * $max-scale) / 10 + $max-unit,
      ($base-value * $max-scale) + $max-unit
    ),
    if($max-unit == rem or $max-unit == em, ($max-value / 10) + $max-unit, $max-value + $max-unit)
  );

  // clamp()返却
  @return clamp(#{$min}, #{$center}, #{$max});
}

// ========================================
// 使用例
// ========================================

// 例1: 基本的な使用（px単位）
.case1 {
  font-size: clamp-value(16);
}

// 例2: rem単位での最大値・最小値
.case2 {
  font-size: clamp-value(16, rem, rem);
}

// 例3: em単位での最大値・最小値
.case3 {
  font-size: clamp-value(16, em, em);
}

// 例4: 混合単位（最小値はpx、最大値はrem）
.case4 {
  font-size: clamp-value(16, rem, px);
}

// 例5: 最小値を指定
.case5 {
  font-size: clamp-value(16, px, px, 15);
}
.case5-2 {
  font-size: clamp-value(16, rem, rem, 15);
}

// 例6: 最大値と最小値を両方指定
.case6 {
  font-size: clamp-value(16, px, px, 15, 17);
}
.case6-2 {
  font-size: clamp-value(16, rem, rem, 15, 17);
}
.case6-3 {
  font-size: clamp-value(16, em, px, 15, 17);
}