font-size指定にremを使うmixin

remを簡単に扱うためのmixin。IE8以下の環境へはpx指定する。「$base: 16」の意味は後述。¹

@mixin font-size($size, $base: 16) {
  font-size: $size + px;
  font-size: ($size / $base) + rem;
}

// 使用方法
p {
  @include font-size(12);
}

remとは

CSS3でサポートされたfont-sizeの単位で、由来は root + em。
親要素からの相対指定するemに対して、
ルート (html要素) 基準にした相対指定が可能なので、
コードを読みやすい。サイト全体の文字サイズのコントロールが簡単。

例: Font Size Idea: px at the Root, rem for Components, em for Text Elements | CSS-Tricks

---

1. 現在普及しているブラウザはすべてfont-sizeの初期値が16pxである ↩