前回からSassの記事が続いていますが、今回もSassの便利な機能を使ったケースについてまとめていきたいと思います。本記事では、ウィンドウ幅のサイズに合わせて可変するフォントサイズを実装していきます。ウィンドウ幅のサイズに合わせて可変させるには「vw」の単位を使う必要があります。このvwというのは現在のウィンドウ幅に対する割合で、100vwがウィンドウ幅と等しくなります。
つまりウィンドウ幅のサイズが変わると、見かけ上の幅も合わせて変わるようになります。この特性を活かして、ウィンドウ幅に合わせたフォントサイズを表示させることができます。ただ、そのままfont-sizeにvwの単位で全て固定で設定しては、ウィンドウ幅によってはフォントが大きすぎたり、小さすぎるという問題が発生してきます。
ですので、ウィンドウ幅ごとにvwの値を調整する必要があります。そこで今回はSassでオリジナルの関数が定義できるfunctionの機能を使って、シンプルかつサイズの調整ができるようにしていきます。
まず、その前にフォントサイズをウィンドウ幅に合わせるためにどのようにサイズが算出されるか確認しておきます。今回は、480pxのスクリーンサイズで、16px相当のサイズを基準とする例でみていきます。そのためには、「480px ＝ 100vw」となるので、480を100で割ると、1vwあたりのpx換算した値が出ます。それをターゲットとなるフォントサイズの16pxから割ることで、必要なvwの値を出すことができます。つまり、
[基準のフォントサイズ ／（スクリーンサイズ ／100）＊ 1vw]
という計算式になります。実際の数値を代入すると、
16px ／（480px ／ 100）＊ 1vw ＝ 2.94118vw
という数値が出ました、つまり、480pxのウィンドウサイズでは、16pxは2.94118vw相当になるということになります。
これをSassのfunctionで独自の関数として作成し計算できるようにしていきます。また、基準となるフォントサイズとウィンドウ幅に関しては変数化しておくことで、自由に調整できるようにしておきます。まずは下記のようにfunctionを定義していきます。
【Sass（SCSS）】
@function responsive-fs(){
$target-fs: 16;
$target-vw: 480;
$vw-ratio: $target-vw / 100;
@return $target-fs / $vw-ratio * 1vw;
}
body {
font-size: responsive-fs();
}
基準となるフォントサイズとウィンドウ幅は変数として定義します。あとはそのまま計算式を作成していく形になります。最終的にはreturnとして計算結果が値として返されるようにしておきます。そして、実際に適用させるところで定義した独自関数を記述して、計算された値が出るようにします。実際にコンパイルすると下記のようになります。
【CSS】
body {
font-size: 2.94118vw;
}
また、上記では変数をfunction内で定義する形になりますが、functionで定義した引数に割り当てることで、関数の引数に基準となるフォントサイズとウィンドウ幅を入れられるようになるのでとても便利です。
【Sass（SCSS）】
@function responsive-fs($target-fs,$target-vw){
$vw-ratio: $target-vw / 100;
@return $target-fs / $vw-ratio * 1vw;
}
body {
font-size: responsive-fs(16,480);
}
いかがでしょうか、このようにSassの便利な機能を活用してより高度なUIやデザインが実現できるようになります。今回は独自の関数が定義できるfunctionでレスポンシブなフォントサイズを実現しましたが、他にもいろんなところで使えるのではないでしょうか。
（参考にさせて頂いたサイト）
font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する
