Sassでremやvwの値を自動計算できるようにする方法

Sassを使ってコーディングする際に、remやvwの値を自動計算できるようにする方法をご紹介いたします。

remやvwでフォントサイズを指定する時の面倒な計算をする必要がなくなるため、作業の効率化を図れます。

remの値を自動計算する方法

remの値はrootのフォントサイズをベースに計算しますので、ブラウザの標準フォントサイズである16pxが基準で「1rem = 16px」となります(ブラウザのフォントサイズ設定を変更していたら基準も変わります)。

16pxを基準としてフォントサイズを計算するのは面倒なので、htmlに”font-size:62.5%;”を指定してrootのフォントサイズを10pxにする手法もあります。10pxをベースにすれば計算は楽チンですね。ただ、これには賛否両論あるみたいです(詳しくはググってみてください)。

Sassを使っているのであれば、こういうハック的な手法は使わずとも、mixinで簡単に自動計算できます。

mixinの内容は以下の通りです。16で割って1remを掛けるというシンプルなものです。

@mixin rem($fontsize) {
  font-size: $fontsize + px;
  font-size: ($fontsize / 16) * 1rem;
}

フォントサイズを指定する際は、以下のようにします。デザインで指定されているフォントサイズを値をして入れるだけです。

.example {
  @include rem(18);
}

コンパイルすると以下のようなCSSが出力されます。

.example {
  font-size: 18px;
  font-size: 1.125rem;
}

なお、pxの方(font-size: $fontsize + px;)はmixinから削除してもOKです。デベロッパーツールで確認する時に、pxもあった方がわかりやすいから入れています。

vwの値を自動計算する方法

vwでフォントサイズを指定する場合、例えばデザインの横幅が750pxで、フォントサイズが18pxだったら、「18 / 750 *100 = 2.4vw」という計算をして指定します。これをフォントサイズを指定する度に計算するのはつらいですね。

Sassのfunctionとmixinを組み合わせると、vwも自動計算できます。

まずはfunctionとmixinを追加します。$viewportの値である”750″のところは、デザインの横幅(ベースとなる横幅)を入れてください。

@function getvw($fontsize, $viewport: 750) {
  $rate: 100 / $viewport;
  @return $rate * $fontsize * 1vw;
}

@mixin vw($fontsize) {
  font-size: getvw($fontsize);
}

フォントサイズを指定する時は、以下のようにします。

.example {
  @include vw(18);
}

コンパイルすると、以下のようなCSSが出力されます。

.example {
  font-size: 2.4vw;
}

あとがき

単純な計算とはいえ、余計なことに脳のリソースを使わなくて良くなるのでおすすめです。結構な時短になると思います。

ちなみに、最近は専らrem指定で、フォントサイズにpxやvwは使わなくなりました。単純にクライアントである制作会社さんからrem指定を希望されるからですけど、慣れもあって直請け案件でもrem指定でコーディングしてます。