【罪と罰 その6】オレとサス　その4

マクドナルドにて「チーズバーガーのチーズ抜きをご注文のお客様」と呼ばれていたのを、
どうせ罰ゲームだなと思って見ていると普通の子連れ主婦がきて4度見くらいしてしまったKameです。

今回はなんと奇跡のオレサス その4です。

前回Functionsの話をしましたが、自分でも何か作ってみようと思い、簡単なものを作ってみた次第です。
だいぶ前のボスの記事【忘備録】パーセントでフォントサイズを指定する時に便利なやつで紹介されていたフォントサイズの指定を、
Functionで表も見ないで簡単に指定できるようにしてみました。

Font Size Function

まずはコードを…。

$bodySize:0;

@function baseSize($base) {
	@if $base < 12{
		$base:12;
	}
	@if $base > 16{
		$base:16;
	}
	$bodySize:$base;
	$size: percentage($base / 16);
	@return $size;
}

@function size($size){
	@return percentage($size / $bodySize);
}

どういうふうに使うかといいますと

body {
	font-size : baseSize(13);	// ベースとなるサイズ（px）を指定
}

h1 {
	font-size : size(20);	// 表示したいサイズを()内に（単位はpx）
}

p {
	font-size : size(10);	// 表示したいサイズを()内に（単位はpx）
}

こんな感じで使います。

チームでの話し合い時に、ベースとなるサイズを12pxに合わせる派か13pxに合わせる派かどうかで分かれたと思うので、ベースサイズを最初に設定できるようにしました。
なのでまずはじめにbodyのfont-sizeプロフパティにbaseSize()というファンクションを利用して自分の設定したいベースサイズを指定してください。
ちなみにベースサイズ12px以下、16px以上は強制的にそれぞれ12px、16pxに設定されます。

後は好きな場所でsize()ファンクションを利用してその場所で設定したいpxを指定してやってください。後はうまくSassがやってくれます。

上記の例ですとCSSは、

body {
  font-size: 81.25%; // 13px
}

h1 {
  font-size: 153.846%; // 20px
}

p {
  font-size: 76.923%; // 10px
}

こんな感じにきちんと%で出力してくれます！

コードの説明

内部的にどんな処理はどんなふうになっているか超簡単に説明します。

まずはこのbaseSize()の部分

$bodySize:0; // $baseSizeを宣言（後にベースサイズが入ります。）

@function baseSize($base) { // Functionsの型に従って
	@if $base < 12{
		$base:12;			// 入力のあったサイズが12以下だったら強制的に12に設定
	}
	@if $base > 16{
		$base:16;			// 入力のあったサイズが16以上だったら強制的に16に設定
	}
	$bodySize:$base;		// $baseSizeにベースサイズを代入
	$size: percentage($base / 16);	// ブラウザの基本サイズ16と除算し、結果を％で出力
	@return $size;　//　リターン
}

注目はやっぱりpercentage()の部分でしょう。()内部の除算を%に変換して出力してくれます。
さらに小数点以下の数値は自動的にCSSが扱える範囲の3桁までで四捨五入をしてくれます。便利～。

一行目の$baseSizeは一応グローバルで宣言をしておかないと後で別のFunction内で使う際に引き出せなかったので。
0を入れているのは空だとエラーを出すからです。

次にこの部分、

@function size($size){
	@return percentage($size / $bodySize); // ベースサイズと入力のあったサイズで計算
}

短！！もうSass様様ですね。

よかったらimportしてね！

なんとこいつをGitHubにアップロードしてしまいました！！！
FontSizeFunc:Sass

とくにGitHubに上げた理由はないです。共有しやすいかなー程度です。
よければお好きにダウンロードしていただいて@importしてやってください。

まとめ

今回の教訓としては

• ifとかforとか演算とか基本的なところがわかっていればFunctionsなんて簡単！
• プログラムの速さとか気にしなくてもいいから恐れずに書ける！
• 色んな複雑な計算は結構予め用意してくれているのでとりあえずココで探してみるといい！
• 上で無いものは自分で作ってしまえばいい！
• とりあえず何でもかんでもGitHubに上げてしまおうぜ！！

以上！

使っていると結構不具合がありました。またどこかで修正しようと思います。
IEのfont-sizeが鬼門ですね。。。（追記）