Sassを使ってfont-sizeのrem単位をpx感覚で使う方法

スキルアップ

2020.05.31

計算が面倒なrem単位について、Sassの関数を用いてpxのごとく直感的に扱う方法を紹介します。

前提としてSassを使える環境が必要です。

そのような環境がまだないという方は、GulpでSassを含むタスクランナーを比較的簡単に導入できる方法も別の記事で書いていますので、是非この機会にやってみてください。

記述方法

ベースとしてSassファイルに記述するものは以下のコードです。

$baseFontSize: 16;
  @function rem($pixels) {
    @return $pixels / $baseFontSize * 1rem;
  }

そしてremを使用する際は以下のようにfont-sizeを記述します。

p {
    font-size: rem(16);
}

このように記述するとCSSファイルでは1remと出力され、ブラウザでは16pxとなります。

rem(20)と書けば、CSSでは1.25remと出力され、ブラウザでは20px。

rem(40)なら、2.5rem、ブラウザでは40px。

つまり「rem( n )のnの数字がそのままpx値になる」ということです。

以上です。楽ちんですよね。

また、フォントサイズの「vw」単位もこの記述の仕方を利用して関数式で書くことができます。

個人的にはこちらも便利だなと思いますので是非。