CompassのVertical Rhythmがrem単位に対応していたので、軽い使い方について

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

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

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

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

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

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

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

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

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

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

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

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

これは冒頭に書いた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

最終更新日:2014年11月19日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/compass-vertical-rhythm-rem/trackback/