mixinでfont-sizeとline-heightをremでうまく吐き出す

Vertical Rhythm Designとremの相性

マテリアルデザインをベースにコーディングを進めるにあたって、ベースとなる行間が完全に計算されたフォントサイズの設計をめちゃくちゃ簡単に設定できないかと考えた自分用メモですが、何かの参考になればと思い投稿しておくことにしました。

もちろん、Compassを使えばいくつかのmixinが用意されていてどうにかなりますが、場合によってはフォントも行間もコントロールしたくなることがある。
ということで、rem指定したフォントに対して、均一にline-heightが付与されつつも、こっちでも指定することの出来る変数を考えてみました。

基本、px感覚で指定ができつつも、remの効かないブラウザの場合、font-sizeも書き出してくれます。

前準備

全体のfont-sizeをremで書き出せるように調整をします。

html {
  font-size: 62.5%;
}

mixin

@mixin fts($fts, $lin: 24) {
  $rem: $fts / 10;
  $linS: $lin / $fts;
  font-size: #{$fts}px;
  font-size: #{$rem}rem;
  line-height: $linS;
}

$lin: 24の指定に、基本的に取りたいベースユニット（ベースとなる行間）を指定する。
あとは勝手にfont-sizeのpxとremの両方を書き出して、line-heightを計算してくれる。

使い方

// font-sizeを14pxにしたい場合
.hoge {
  @include fts(14);
}

// line-heightを故意的に変えたい場合
.hoge {
  @include fts(10,28);
}

// line-heightを取りたくない場合、font-sizeと同じ数字を入れるとline-height: 1が返る
.hoge {
  @include fts(14,14);
}

引数としてfont-sizeとline-heightを渡せば勝手に計算してくれます。

実際の出力

.hoge {
  @include fts(14,18);
}

.hoge {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.28571;
}

使いどころがあれば使ってください！