マクドナルドにて「チーズバーガーのチーズ抜きをご注文のお客様」と呼ばれていたのを、
どうせ罰ゲームだなと思って見ていると普通の子連れ主婦がきて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が鬼門ですね。。。(追記)
僕は10pxで揃えたいタイプなんですよね~。
個人的にベースのフォントサイズから再計算して別の大きさにした場合、Firebugでフォントサイズを見たら12.8pxとか端数が出てる場合があるのが困る。文字の大きさ的には問題ないけど、行の高さが変わるから余白の具合が変わってしまうんですよね。個人的には余白などはデザインに極力合わせたいから余計に気持ち悪い。
試してないけど、これを使えばピッタリ整数にしてくれそうなので、そういう意味でもありがたいスニペットです。
あ!10pxでしたか!
10pxまで対応させますかね。数字をいじるだけですが
10px派ですけど、悩んでいるところですしかなりのマイノリティなのでこのままでいいと思います!!