font-sizeのパーセンテージ指定をSassで自動生成

久しぶりの更新です。

Windows XPのサポート終了が4月に迫っていますが、
時としてレガシーなIE（ここではIE8以下のこと）対応がなくなるのかと言われると、すぐにはなくならないと思います。
受託制作ですと、クライアントさんの環境などによってターゲットブラウザは左右されがちな面があります。

今日は労力がかかるレガシーなIE対応を少しでも簡単にするべく、ちょっとしたSassのfunctionを作ったので紹介します。

レガシーなIEではブラウザ側の設定でフォントサイズが変更できるのですが、
CSSの設定でpxでの絶対指定をしてしまうと、フォントサイズが拡大できないなどユーザビリティを下げる要因になってしまいます。
また、レスポンシブWebデザインなどでも相対指定する機会はまだまだあるのではないでしょうか。

フォントサイズを変更するfunction

元ネタは2年ほど前のえどさんの記事にて紹介されている、font-size指定のfunctionです。
fz(12) と指定することで%(相対値)を自動的に設定できます。

yuhiisk/scss-lib – Github

style.scss

// 関数群の読み込み
@import "core/func";
// ベースフォントサイズを指定(ここでは12px)
$baseFontSize: 12;

body {
    font-size: #{$baseFontSize}px;
}

.parent {
    font-size: fz(10); // font-size: ( 10 / $baseFontSize )%;

    .child {
        font-size: fz(15, 10); // font-size: ( 15 / 10 )%;
    }
}

まずfunctionのファイルをインポートし、変数 $baseFontSize に12と指定します。bodyのフォントサイズ指定にはこの変数を使うことでベースフォントサイズを12pxに設定します。
実際にfunctionを使う時はプロパティ値に fz(10) と指定することで10px相当の83%を指定することができますし、
fz(14) と指定すれば14px相当の116%を指定することが出来ます。

また、fz(15, 10) の様に引数を2つ指定することで10pxに対しての15px相当の%を強制的に指定することも出来ます。
強制指定できるようにした理由は、フォントサイズの指定が入れ子になった時に%指定が複雑になってしまうのを避けるためです。

気になる方は一度使ってみてくださいませ。

AnalyticsのIE8対応も終わりましたね。
Google Analyticsが2013年末でIE8のサポートを終了

今年はIE9以上の対応がデファクトスタンダードになりそうな予感です。