scssでfont-sizeの横幅に応じて可変するmixinを作ってみる

以下の記事やサービスでfont-sizeを入力するとそれに応じて出力はされますが、scssで使用する場合にはmixinで使用したいため、font-size調整用のmixinを作成した内容です。

coliss.com

www.fluid-type-scale.com

min-max-calculator.9elements.com

結果

@use 'sass:math';
// 共通で使用しているscss変数
$fontSizeDefault: 16; // body要素で表示しているfont-size
$sizeDefaultPc: 1440; // 最大ウィンドウサイズの指定
$sizeSm: 390; // 最小ウィンドウサイズの指定

// 小数点を丸めるために使用するmixin
@function roundToDecimal($number, $decimalPlaces) {
  $multiplier: math.pow(10, $decimalPlaces);
  @return math.div(math.round($number * $multiplier), $multiplier);
}

// font-sizeの可変対応を行う用のmixin
// $minFontPxSize: 最小ウィンドウサイズの時のフォントサイズ
// $maxFontPxSize: 最大ウィンドウサイズの時のフォントサイズ
// @see https://github.com/9elements/min-max-calculator/blob/main/src/components/Calculator/Calculator.svelte#L58
@mixin font-size($minFontPxSize, $maxFontPxSize) {
  $minFontRemSize: math.div($minFontPxSize, $fontSizeDefault);
  $maxFontRemSize: math.div($maxFontPxSize, $fontSizeDefault);
  $variablePart: math.div($maxFontPxSize - $minFontPxSize, $sizeDefaultPc - $sizeSm);
  $variableSize: roundToDecimal(
      math.div($maxFontPxSize - $sizeDefaultPc * $variablePart, $fontSizeDefault), 3
  );
  font-size: clamp(
    #{$minFontRemSize}rem,
    #{$variableSize}rem + #{roundToDecimal($variablePart, 4) * 100}vw,
    #{$maxFontRemSize}rem
  );
}

// 使い方
.hoge {
  @include font-size(16, 24);
  // font-size: clamp(1rem, 0.814rem + 0.76vw, 1.5rem);
}

参考にしたコード

基本以下のコードを参考にscss用に変換したものになります。

github.com

scssでの計算の処理について今回使用したもの

sass-lang.com

割り算を行う

sass-lang.com

@use 'sass:math';

@debug math.div(1, 2); // 0.5
@debug math.div(100px, 5px); // 20
@debug math.div(100px, 5); // 20px

べき乗の計算を行う（10のべき乗を行い桁数を追加する）

sass-lang.com

@use 'sass:math';

@debug math.pow(10, 2); // 100
@debug math.pow(10, 3); // 1000

丸め込みを行う

sass-lang.com

@use 'sass:math';

@debug math.round(4); // 4
@debug math.round(4.2); // 4
@debug math.round(4.9); // 5