Vertical Rhythmを実装する機能は元々Compassにあったのですが、rem単位への対応がイマイチでした。

rem単位はIE8以下には対応できず、同時にpx指定も必要なのですが、CompassのVertical Rhythm機能にそれらしいものは無かったんです。

例えば今までは、自分の場合このように対応していました。

h2 {
    //marginのpx、rem指定
    margin: ($base-line-height * 2) 0 $base-line-height;
    margin: rhythm(2) 0 rhythm(1);

    //px、remのプロパティを出力するmixin
    @include font-size(28); 

    //line-heightのpx、rem指定
    line-height: $base-line-height * 3;
    @include adjust-leading-to(3);
}

計5行です。見た目的によろしくないですね。remはCompassの計算に任せて、pxは自分で書き込んでいました。

しかし嬉しいことに、Compassはいつの間にかrem単位に対応していました。

（Compassのバージョンを1.0.1にアップデートすると上のソースコードが逆におかしいCSSになったので気付きました。2014年08月15日にアップデートについての記事が投稿されていますね）

remに対応したCompassのVertical Rhythmを使う

それではどのように使うのか見てみましょう。基本的な手順は今まで通りです。

まずはベースとなるフォントサイズ、行の高さを変数で設定します。

//ベースになるフォントサイズ
$base-font-size: 16px;

//ベースになる行の高さ
$base-line-height: 24px;

次に、新しく追加された変数$rhythm-unitに「”rem”」と指定し、変数$rem-with-px-fallbackに「true」を指定するとVertical Rhythmを実装する各mixinや関数がremだけでなくpxの値も出力するようになります。（このtrueはデフォルト値なので明示的に変数を設定する必要はありません）

//単位をデフォルトの"em"から"rem"に変更する
$rhythm-unit: "rem";

//デフォルトでtrueなので、この指定は必要無し
$rem-with-px-fallback: true;

そして、設定した基本となるフォントサイズと行の高さをhtmlタグに適用するためestablish-baselineを使って出力します。

@include establish-baseline;

これで準備はOKです。例えばh2タグにVertical Rhythmを適用したい場合は以下のようにします。

h2 {
    @include rhythm-margins(2, 1);
    @include adjust-font-size-to(28px, 3);
}

これは冒頭に書いた5行のCSSと同じ結果になります。超絶楽になりました。

ここで使った関数について、ざっくり説明するとこんな感じです。

rhythm-margins()の第一引数で要素の上（top）、第二引数で要素の下（bottom）にmarginを設けます。marginのサイズは「引数の数値 * $base-line-height（ベースの行の高さ）」になります。要素の上下に設ける行数を指定するイメージですね。

そしてadjust-font-size-to()の第一引数で要素のフォントサイズを指定、第二引数で行の高さ（行数）を指定します。

ちなみにrhythm-padding()という、上下に設ける行数をpaddingにするmixinもあります。

その他のmixinや関数についてはCompassのリファレンスを参考になります。

Vertical Rhythm | Compass Documentation