[CSS,rem,Sass]remとか言う単位とSassで思い通りのfont-sizeライフを送ればいいと思うの。

remと聞くとレム睡眠しか思い浮かびません。
体は眠っているのに脳は活発に稼働しているだなんてニンゲンの神秘を感じてしまいますが、今回はそういう話でなくて、ただの単位です。単位としてのremです。

remってなに？

rem(room em)とはroot要素(一般的にhtmlやbody)のサイズに対する相対的なサイズの単位です。
って言ってもイマイチ分からないので実例をあげていくと↓

html例

<ul>
    <li>list 1</li>
    <li>list 2
        <ul>
            <li>list 2-1</li>
            <li>list 2-2</li>
        </ul>
    </li>
    <li>list 3</li>
</ul>

上記にようなリストの入れ子があったとします。

CSS

body {
    font-size: 62.5%;
}
li {
    font-size: 1.5em;
}

CSSはこんな感じで書いたとしましょう。

まずはbodyに対してfont-sizeが62.5%というのは計算しやすいように(ブラウザのフォントサイズ16px X 62.5% = 10px)としています。
それに対しliのフォントサイズが1.5emですから(10px X 1.5 = 15px)となります。
しかしこの場合、入れ子になっているliは(10px X 1.5 X 1.5 = 22.5px)になってしまいます。

ここでremの登場

body {
    font-size: 62.5%;
}
li {
    font-size: 1.5rem;　/*ここをremにします*/
}

こうしてやるとroot(この場合body)に対して1.5倍なので、入れ子になったliも(10px X 1.5 = 15px)となります。

まぁ！なんて便利！

しかしブラウザの問題が・・・

remという単位はIE9+です。(条件付き)
なので実際は使う場合は

html {
    font-size: 62.5%;
}
li {
    font-size: 15px;
    font-size: 1.5rem;
}

という風に、フォントサイズ15pxを宣言しておいてremをサポートするブラウザだけ1.5remで上書きするといった方法を取るのが一般的だと思います。
ん～めんどくさい。

ということでSassでこれをやってみましょう。

Sass、@mixinでremを使ってみよう

こういう面倒くさいCSSはSassのおまかせってことで

html {
    font-size: 62.5%;
}
@mixin rem($size) {
    font-size: $size + px;
    font-size: ($size / 10) + rem;
}
li {
    @include rem(15);
}

↓コンパイル後

html {
  font-size: 62.5%;
}

li {
  font-size: 15px;
  font-size: 1.5rem;
}

という感じremという@mixinを作って変数でそのままpxを付けたものと10で割ってremを付けたものを出力しています。
この@mixinを1つ作っておけば使い回しができて便利ですね。

まとめ

今回はremからの@mixinでした。
remはまだ早いかな？って思ってたあなた！これを期にSass導入、@mixin使い回しやってみては？