Sass のミックスインをローカルな名前で呼ぶ

Sass でライブラリをプロジェクトに組み込む場合など、ミックスインを「ローカル」な名前で呼ぶようにしておくと便利なことがある。

// ミックスインの実装
@mixin awesome_gradient ($angle, $color-stops...) {
    $prefixes: webkit, moz, o;
    // ...
}

// ローカルなミックスインの定義
@mixin linear-gradient ($args...) {
    @include awesome_gradient($args);
}

// ローカルなミックスインをインクルード
.foo {
    @include linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5));
}

ここで .foo は linear-gradient というミックスインをインクルードしているけど、そのミックスインはローカルな名前を提供しているだけで、実際には awesome_gradient を呼んでいる。一見すると無駄だけど、これがどんな場合に便利かというと、たとえばライブラリのミックスインを利用してるけどやっぱ別のに差し替えたい、みたいなときにラク。

// 別のミックスインの実装
@mixin yetAnotherLinearGradient ($first, $rest...) {
    // ...
}

// ローカルな名前はそのまま
@mixin linear-gradient ($args...) {
    @include yetAnotherLinearGradient($args);
    // @include awesome_gradient($args);
}

このように、ミックスインの実装は awesome_gradient から yetAnotherLinearGradient に差し替えたけど、ローカルな名前は linear-gradient のままなので、ミックスインをインクルードしている箇所では修正の必要がない。

重要なのはローカルのミックスインを定義するときに $args... という可変長引数 (Variable arguments) を使うことで、これによってミックスイン間で引数の形式が異なってもある程度は吸収できる。もっともミックスインの設計がまったく異なるような場合にはインクルードしてる箇所も修正しないといけないけど。

またこの記事のもうひとつのメッセージとして、linear-gradient の混沌 から僕を救ってくれるクールなミックスインないですか、というのもあります。