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

Web技術

計算が面倒な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」単位もこの記述の仕方を利用して関数式で書くことができます。

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

 

つな

アラサーからWebデザイナーになりました。前職は医療従事者。都内に勤める道産子です。このブログでは私自身が未経験から転職した体験を元に、Webデザイナーを目指す方に役立つ記事、スキルアップに繋がる情報を主に発信しています(適当な日記もたまに)。
Twitter:@nkichiishi

つなをフォローする
Web技術
スポンサーリンク
つなをフォローする
Webデザイナーどうでしょう

コメント

タイトルとURLをコピーしました