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