Sass (SCSS) の mixin で max-font-size を実現する（IE 9+ 対応）

#はじめに
max-width や min-height みたいな感じで、最大・最小の font-size を指定したい局面って結構あると思います。具体的には max-font-size みたいなプロパティがあると嬉しいけど、今のところそういったものはないので、それを実現するための mixin を書きました。
min()、max()、clamp() プロパティの挙動を参考にしています。 この辺のブラウザ対応状況がよくなればな〜〜。

#min-font-size の mixin
変数として、可変フォントサイズと最小フォントサイズを指定します。

min-font-size.scss

/*
min-font-size ($font_size, $min_font_size)

$font_size (vw):     可変フォントサイズ
$min_font_size (px): 最小フォントサイズ
*/

@mixin min-font-size ($font_size, $min_font_size) {
    $break_point_min: $min_font_size / $font_size * 100vw;
    font-size: $min_font_size;

    @media screen and (min-width: $break_point_min) {
        font-size: $font_size;
    }
}

@include のサンプル

p.min {
    @include min-font-size(2vw, 15px);
}

#max-font-size の mixin
変数として、可変フォントサイズと最大フォントサイズを指定します。

max-font-size.scss

/*
max-font-size ($font_size, $max_font_size)

$font_size (vw):     可変フォントサイズ
$max_font_size (px): 最大フォントサイズ
*/

@mixin max-font-size ($font_size, $max_font_size) {
    $break_point_max: $max_font_size / $font_size * 100vw;

    font-size: $font_size;

    @media screen and (min-width: $break_point_max) {
        font-size: $max_font_size;
    }
}

@include のサンプル

p.max {
    @include max-font-size(2vw, 30px);
}

#clamp-font-size の mixin
変数として、最小フォントサイズと可変フォントサイズ、最大フォントサイズを指定します。

clamp-font-size.scss

/*
@mixin clamp-font-size ($min_font_size, $font_size, $max_font_size)

$min_font_size (px): 最小フォントサイズ
$font_size (vw):     可変フォントサイズ
$max_font_size (px): 最大フォントサイズ
*/

@mixin clamp-font-size ($min_font_size, $font_size, $max_font_size) {
    $break_point_min: $min_font_size / $font_size * 100vw;
    $break_point_max: $max_font_size / $font_size * 100vw;

    font-size: $min_font_size;

    @media screen and (min-width: $break_point_min) {
        font-size: $font_size;
    }

    @media screen and (min-width: $break_point_max) {
        font-size: $max_font_size;
    }
}

@include のサンプル

p.clamp {
    @include clamp-font-size (15px, 2vw, 30px);
}

#clamp-font-size の mixin その2：ブレークポイントでの指定
変数として、最小フォントサイズと最大フォントサイズ、およびその2サイズを切り替えるための画面幅を指定します。レスポンシブ想定だと結構便利かもしれない。ただこれは calc() を使わないといけないので、IE 的にはよろしくない。

clamp-font-size-with-break-points.scss

/*
@mixin clamp-font-size-with-break-points ($min_font_size, $max_font_size, $break_point_min, $break_point_max)

$min_font_size (px):   最小フォントサイズ
$max_font_size (px):   最大フォントサイズ
$break_point_min (px): この値以下の時、最小フォントサイズで描画
$break_point_max (px): この値以上の時、最大フォントサイズで描画
*/

@mixin clamp-font-size-with-break-points ($min_font_size, $max_font_size, $break_point_min, $break_point_max) {
    font-size: $min_font_size;

    @media screen and (min-width: $break_point_min) {
        $scale: ($max_font_size - $min_font_size) / ($break_point_max - $break_point_min);
        font-size: calc(#{$min_font_size} + #{$scale} * (100vw - #{$break_point_min}));
    }

    @media screen and (min-width: $break_point_max) {
        font-size: $max_font_size;
    }
}

@include のサンプル

p.clamp-with-break-points {
    @include clamp-font-size-with-break-points (15px, 30px, 500px, 1100px);
}

#参考
How Do You Do max-font-size in CSS? | CSS-Tricks
https://css-tricks.com/how-do-you-do-max-font-size-in-css/