はじめに
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): 最小フォントサイズ
*/@mixinmin-font-size($font_size,$min_font_size){$break_point_min:$min_font_size/$font_size*100vw;font-size:$min_font_size;@mediascreenand(min-width:$break_point_min){font-size:$font_size;}}@includeのサンプル
p.min{@includemin-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): 最大フォントサイズ
*/@mixinmax-font-size($font_size,$max_font_size){$break_point_max:$max_font_size/$font_size*100vw;font-size:$font_size;@mediascreenand(min-width:$break_point_max){font-size:$max_font_size;}}@includeのサンプル
p.max{@includemax-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): 最大フォントサイズ
*/@mixinclamp-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;@mediascreenand(min-width:$break_point_min){font-size:$font_size;}@mediascreenand(min-width:$break_point_max){font-size:$max_font_size;}}@includeのサンプル
p.clamp{@includeclamp-font-size(15px,2vw,30px);}clamp-font-size の mixin その2：ブレークポイントでの指定
変数として、最小フォントサイズと最大フォントサイズ、およびその2サイズを切り替えるための画面幅を指定します。レスポンシブ想定だと結構便利かもしれない。
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): この値以上の時、最大フォントサイズで描画
*/@mixinclamp-font-size-with-break-points($min_font_size,$max_font_size,$break_point_min,$break_point_max){font-size:$min_font_size;@mediascreenand(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}));}@mediascreenand(min-width:$break_point_max){font-size:$max_font_size;}}@includeのサンプル
p.clamp-with-break-points{@includeclamp-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/