クリスマスイブまで4日なのに今からアドベントカレンダーをやるとかちょっと意味が分からない宣言ですが、せっかくなので「アドベントカレンダーやってるよ！」という雰囲気を出すためブログを連日更新してみます。（なんか技術者っぽいし！）というわけで今回はSassに関わる小ネタを書きます。フォントサイズのrem指定をCompassの関数で行う（remとフォントサイズに関してはこちらの記事『SCSSで古いIEなどにもrem感覚でフォントを指定する方法 | NeGiMeMo.net』が参考になると思います）少し前（？）から情報が出てきたフォントサイズをrem単位で指定する方法ですが、CSSの書き方はこんな感じですよね。html { font-size: 62.5%; //ベースとなるフォントサイズを10pxに指定}p { font-size: 14px; font-size: 1.4rem;}古いブラウザはrem単位に対応していないので、px値も書く必要があります（フォールバック）。それで、このCSSをSassを使って楽に書くMixinが出てきました。html { font-size: 62.5%;}@mixin rem-font-size($size) { font-size: $size + px; font-size: ($size / 10) * 1rem;}//使用方法p { @include rem-font-size(14);}いちいちpxとrem両方書かないでMixinの1行で済ます方法ですね。Compassの関数でやってみるこのrem単位指定ですが、htmlタグに指定するfont-sizeが62.5%以外だった場合計算が合わなくなるので上記のMixinが使えません。そしてCompassのバーティカルリズムを使用するとまさにこの状況になるんですね。例えばCompassのバーティカルリズムの設定を以下のようにした場合、htmlに指定されるfont-sizeは100%になります。（以降のCSS結果はこのバーティカルリズム設定を前提とします）//バーティカルリズムの設定$base-font-size: 16px; //基本を16pxにしたいよ$base-line-height: 24px;$rhythm-unit: "rem";//バーティカルリズムの設定を吐き出す@include establish-baseline;/* 結果のCSS */html{ font-size:100%; //62.5%じゃない… line-height:1.5em;}なので、Compassのバーティカルリズムを使用している場合のフォントサイズ指定はadjust-font-size-toというMixinを使います。p { //第1引数にフォントサイズ、第2引数に行数（行の高さ）を指定 @include adjust-font-size-to(14px, 1);}/* 結果のCSS */p { font-size:14px; font-size:0.875rem; line-height:24px; line-height:1.5rem;}ただこのMixn、line-heightも出力してしまいます。「行の高さは要らない、かな…」という場合は内部で使用している関数を使ってみましょう。adjust-font-size-toの中身を拝見してみます。@mixin adjust-font-size-to($to-size, $lines: auto, $from-size: $base-font-size) { $to-size: convert-length($to-size, px, $from-size); @if $lines == auto { $lines: lines-for-font-size($to-size); } @include output-rhythm(font-size, convert-length($to-size, $rhythm-unit, $from-size)); @include adjust-leading-to($lines, $to-size);}ほうほう、どうやらoutput-rhythmというMixinとconvert-lengthという関数を使えば要望が叶えられそうです。よって、これらを使ったrem単位のフォントサイズのみの指定はこうなります。p { @include output-rhythm(font-size, convert-length(14px, $rhythm-unit));}/* 結果のCSS */p { font-size:14px; font-size:0.875rem;}convert-lengthの第1引数にフォントサイズを指定します。（第2引数はバーティカルリズムの設定変数をそのまま渡します）ちょっと長くて覚えづらいので、オレオレMixinでラッピングすると良いかもしれません。こんな感じでしょうか。@mixin compass-font-size($size, $rhythm-unit: "rem") { @include output-rhythm(font-size, convert-length($size, $rhythm-unit));}p { @include compass-font-size(14px);}/* 結果のCSS */p { font-size:14px; font-size:0.875rem;}そんなこんなで、line-height指定が要らない場合はこのようにしています。
