Sassでremを使用したVertical Rhythmを生成する@mixin

デザインの手法のひとつに「Vertical Rhythm」というものがあります。1行の高さを1つの単位として一定の縦のパターンを作るというものです。通常のCSSでこれを実現するのは難しいですが、Sassであれば@mixinや@functionで簡単に生成することができます。

sponsored link

デモ

See the Pen Vertical rhythm(responsive) by ManabuYasuda (@gaku) on CodePen.

デモはCODEPENにあげています。ボーダーが1行の高さを表しています。@mixinやボーダーのスタイルの元にさせていただいたのは[Sass/SCSS] remを使ったVertical Rhythm | Webデザイン、フロントエンド系の技術に関する備忘録 – whiskersです。

指定はこのようにします(一部ですが)。

変数

Sassでは変数を扱うことができます。@mixinで使用する値を変数として指定・格納します。最終的にはremで出力されますが、サイズはpxで指定してください。

$base-font-sizeは基本になるフォントサイズで、$base-spacingは1行の高さになります。$base-line-heightは1行の高さ÷フォントサイズとして計算されます。例えば24px × 14px = 1.715(1.71429)のように計算されます。Sassでは同じ単位同士を乗算すると単位がなくなります。また、terkelさんが作られたdecimal-round関数によって小数点3桁まで切り上げています(桁数が大きすぎるとズレてしまうため)。

media query

メディアクエリにも対応しています。変数(マップ)と@mixinでブレイクポイントを管理しています。'palm'(min-width: 400px)はkeyとvalueの関係になっていて、次の@mixinの引数でkeyを指定するとvalueが出力されるようになっています。Vertical Rhythmは1000px以上で変わるように指定してあります。

メディアクエリの指定には@mixinを使用します。

Vertical Rhythm

Vertical Rhythm用の@mixinは2つ用意しています。1つ目はfont-sizeline-heightを指定するためのものです。引数にpx単位のフォントサイズを指定するとremに変換してくれます。$shift-vertical-rhythmtrueにしていると@if以降も出力されます。

2つ目はmargin-topmargin-bottomを指定するためのものです。指定した数値 × 1行分の高さのマージンが出力されます。


Vertical Rhythmを使うことによって、説得力のあるデザインをすることができます。また、1行の高さが余白のベースになるので、デザインを決めやすいというメリットもあると思います。コードはGistにもあげていますので、色々と試してみてください。