font-sizeをremをScssの関数で管理して指定する方法
今後remを使ったfont-sizeを指定していくことになったので、remについて調べてところ、
Webサイトのfont-size・・・それでも僕は相対値。の記事に遭遇。
参考になると思ったのでシェアします。
font-sizeのremをScssの関数で管理して指定する方法
まずはScssに関数としてremをまとめます。
@function pxToRem($size, $base-font-size: 16px) {
@return ($size / $base-font-size) * 1rem;
}
そして、1.6remのようにでなく、以下のように指定します。
p {
font-size: pxToRem(32px); /* 2rem */
}
関数pxToRemの()の中に指定したいpxの数値を入れたら自動でremに変換してくれるのですごく便利です。
