【SCSS】フォントサイズを画面幅に合わせて可変・レスポンシブにする@mixin

1. Sass
2. CSS
2023/05/02

やりたいこと

予期せぬ改行などを防ぐため、フォントサイズを画面幅に応じて可変にしたい
デザインカンプの画面幅の時はぴったりそのフォントサイズになるようにしたい

解決法

mixin

@use 'sass:math';

/*
viewport幅 === $base-viewport-width の時に
ちょうど$baseSizeとなるvw値を返す
 */
@function get-vw-for-base-viewport-width($baseSize, $base-viewport-width) {
  @return math.div(100, $base-viewport-width) * $baseSize * 1vw;
}

使用例

@use "xxx" as fn;

.hoge {
  font-size: fn.get-vw-for-base-viewport-width(16px,1500px);
}

この関数自体はただvw値を返しているだけなので、フォントサイズに限らず他要素のサイズを指定する際にも使い回せる。

（が、いい感じの関数名が思いつかなかった）