クリスマスイブまで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指定が要らない場合はこのようにしています。