Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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-topmargin-bottomがつく。
しかしこれでは、横書きでしか使用できない。

縦書きvertical rhythmに使用するmixin

縦書きで必要なのはmargin-rightmargin-leftである。
それの実装のために、leader-rltrailer-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のままでやるしかない。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away