フォントサイズのrem指定をCompassのMixinと関数で行う

クリスマスイブまで4日なのに今からアドベントカレンダーをやるとかちょっと意味が分からない宣言ですが、せっかくなので「アドベントカレンダーやってるよ!」という雰囲気を出すためブログを連日更新してみます。(なんか技術者っぽいし!)

というわけで今回はSassに関わる小ネタを書きます。

フォントサイズのrem指定をCompassの関数で行う

(remとフォントサイズに関してはこちらの記事『SCSSで古いIEなどにもrem感覚でフォントを指定する方法 | NeGiMeMo.net』が参考になると思います)

少し前(?)から情報が出てきたフォントサイズをrem単位で指定する方法ですが、CSSの書き方はこんな感じですよね。

古いブラウザはrem単位に対応していないので、px値も書く必要があります(フォールバック)。それで、このCSSをSassを使って楽に書くMixinが出てきました。

いちいちpxとrem両方書かないでMixinの1行で済ます方法ですね。

Compassの関数でやってみる

このrem単位指定ですが、htmlタグに指定するfont-sizeが62.5%以外だった場合計算が合わなくなるので上記のMixinが使えません。そしてCompassのバーティカルリズムを使用するとまさにこの状況になるんですね。

例えばCompassのバーティカルリズムの設定を以下のようにした場合、htmlに指定されるfont-sizeは100%になります。(以降のCSS結果はこのバーティカルリズム設定を前提とします)

なので、Compassのバーティカルリズムを使用している場合のフォントサイズ指定はadjust-font-size-toというMixinを使います。

ただこのMixn、line-heightも出力してしまいます。「行の高さは要らない、かな…」という場合は内部で使用している関数を使ってみましょう。adjust-font-size-toの中身を拝見してみます。

ほうほう、どうやらoutput-rhythmというMixinとconvert-lengthという関数を使えば要望が叶えられそうです。よって、これらを使ったrem単位のフォントサイズのみの指定はこうなります。

convert-lengthの第1引数にフォントサイズを指定します。(第2引数はバーティカルリズムの設定変数をそのまま渡します)

ちょっと長くて覚えづらいので、オレオレMixinでラッピングすると良いかもしれません。こんな感じでしょうか。

そんなこんなで、line-height指定が要らない場合はこのようにしています。

最終更新日:2015年1月6日

コメント

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

トラックバック

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

Trackback: https://increment-log.com/font-size-rem-compass/trackback/