scss でフォントサイズをremで指定するmixin

2014-02-162014-11-16

今さらながら、SCSSからCompassを使いはじめました。

今さらながら、その便利さに驚愕している日々です。

いろいろ覚えておきたいことは一杯あるのですが今日は基本となるfont-sizeの指定をカンタンにできるようにするmixinの覚え書き。

まずは、rootのフォンとサイズを10pxにするため、htmlに以下のように指定します。

html{font-size:62.5%;}

そしてbodyを14pxを指定する場合、

body{
  font-size:14px; font-size:1.4rem;
}

css3のremの指定と対応していないIE対策としてpxを一緒に指定します。

これをmixinにするには

@mixin font-size($s:14) {
    font-size:$s + px;
    font-size:($s / 10) + rem;
}

とし、18pxで表示したいところには

@include font-size(18);

とするだけ！

めちゃくちゃカンタンになりました！

参考にさせていただきました：

SCSSで古いIEなどにもrem感覚でフォントを指定する方法