縦書きのvertical rhythmを実装するcompassのmixin

compassを使って縦書きのvertical rhythmデザインを実装しようと思ったが、mixinを自作する必要があったのでメモ。

横書きvertical rhythmに使用するmixin

compassでvertical rhythmを実装するには以下の三つのmixinを使う。

vertical.scss

$font-size: 20px;
@include adjust-font-size-to($font-size, 1);
@include leader(1, $font-size);
@include trailer(1, $font-size);

これをコンパイルすると

vertical.css

font-size: 1em;
line-height: 1.5em;
margin-top: 1.5em;
margin-bottom: 1.5em;

となり、margin-topとmargin-bottomがつく。
しかしこれでは、横書きでしか使用できない。

縦書きvertical rhythmに使用するmixin

縦書きで必要なのはmargin-rightとmargin-leftである。
それの実装のために、leader-rlとtrailer-rlというmixinを作る。
margin(もしくはpadding)のrightとleftを付けたいので、

vertical.scss

@mixin leader-rl($lines, $font-size, $property) {
    @if $property==padding {
        padding-right: $base-line-height * $lines;
    }
    @else {
        margin-right: $base-line-height * $lines;
    }
}

@mixin trailer-rl($lines, $font-size, $property) {
    @if $property==padding {
        padding-left: $base-line-height * $lines;
    }
    @else {
        margin-left: $base-line-height * $lines;
    }
}

と書く。
引数は通常のleader,trailerと同じ(行数,font-size,margin or padding)である。
mixin内で使用していないfont-sizeは引数統一のためである。

以下のように書き

vertical.scss

$font-size: 20px;
@include adjust-font-size-to($font-size, 1);
@include leader-rl(1, $font-size);
@include trailer-rl(1, $font-size);

コンパイルすると

vertical.css

font-size: 1em;
line-height: 1.5em;
margin-right: 21px;
margin-left: 21px;

となる。
marginの単位をemにする方法は分からないので、今の所はpxのままでやるしかない。