CSSのフォントサイズ指定作業をSassで簡略化する

CSSでフォントサイズを相対値（em・rem・%）で指定する時に発生する計算は意外と手間なものですよね。私はEmChartを見て値を拾っていますが、細かいチャートから目的の値を探すのは若干大変です。

Sassで簡単にすることはできないかなと思っていたところ、Compassの拡張フレームワークである「Stitch - A CSS Pattern Framework for Compass」の中にrelative-size関数を見つけました。まさに思い通りの計算値＋単位を出力してくれる関数です。

下記のように、relative-size(目的のサイズ,元のサイズ継承したサイズ)を指定すると

body {
 font-size: relative-size(12,16);
}

em値となって返ってきます。これは便利！　ちなみに小数点以下は3桁まで出力されるようです。

body {
 font-size: 0.75em
}

「元のサイズ」という表現がわかりにくいとのご指摘を頂きましたので、「継承したサイズ」修正させて頂きました。

関数の解説と導入に関して

Stitchの_rem.scssに記述された関数を見てみると、非常に簡単なものでした。

@function relative-size($size,$context,$unit:em) {
	@return #{$size/$context}$unit;
}

Stitchで他に使いたい関数がない場合や、CSS HappyLifeさんの「【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編）」で紹介されているScoutを使われている方は、この関数だけをSCSSファイルにコピーして使わせて頂くのが簡単かなと思います。relative-sizeという名前も少し長いので、短い名前にするカスタマイズをするのも良いかもしれません。あとline-height用にカスタマイズをしたりと。

ライセンスが明記されていませんが...。

Stitchを導入されたい方は、公式ページのUsageをご覧下さい。_rem.scssのみインポートすることも可能です。

%指定への対応

私は普段emで指定するので問題ないのですが、%を使う場合もある場合は次のようにカスタマイズすると良いようです。

関数

@function fs($size, $context, $unit:em){
	@if $unit == '%' {
		@return #{$size/$context*100}#{$unit};
	} @else {
		@return #{$size/$context}#{$unit};
	}
}

関数の呼び出し

body{
 font-size: fs(13,16,'%');
}

補足

下記のように関数を使わず記述しても上手くいきそうですが、実際には上手くいきません。

body {
 font-size: (12/16)em;
}

単位の前にスペースが入ってしまいパースエラーとなってしまうからです。

body {
 font-size: 0.75 em;
}