Sassの関数でサイズ指定を簡単に

Sassの@functionでサイズをコンバートする関数を自作すると、マークアップで少し手抜きできます。

値を1/2に変換

レティーナディスプレイ対策もすっかり定番となり
Photoshopのデザインデータは大概×2サイズでできたものとなっているかと思います。

これを、マークアップのときサイズ変換するのが地味に面倒だったりします。
たとえば、デザイン上で36px(36pt)と指定されている文字は×0.5してこうなります。

.headline {
	font-size: 18px;
}

これまで何の疑問もなくいちいち×0.5していましたが、functionを使えばそもそも計算しなくて済むことに気づきました。
このように値を半分にコンバートする関数を設定すれば

@function size($n) {
	@return: $n * .5;
}

デザインデータの値をそのまま入力するだけでOK。塵も積もれば工数削減になります。

.headline {
	font-size: size(36px);
}

複雑な比率計算

スクリーンサイズに合わせて伸縮フィットするマークアップとする場合のサイズ計算も
functionにしていれば簡単です。

たとえば、
xhdpi(360×640)のスマートフォン端末を対象にPhotoshopで作成された720×1280のデザインファイルをもとに
スクリーンの短い辺を360pxとみなして比率を計算すると、こんな風になります。

See the Pen <a href='http://codepen my latest blog post.io/webdev-jp-net/pen/wgwGOx/’>Layout that scales with vmin by webdev (@webdev-jp-net) on CodePen.0

関連記事

Pocket