例: em, remのオールドブラウザ対応
font-size: 1.8em;
font-size: 1.8rem;
新しいブラウザではremで上書きしつつ、レガシーブラウザではemを使う。
この場合、font-size用のmix-inを用意してもいいが、emは色んなサイズ指定になるべく汎用的にしたいとおもう。
しかしそのまま書いても、以下のような結果になってしまう。
// bad
to_rem(prop, font_size)
prop: unit(font_size, 'em')
prop: unit(font_size, 'rem')
to_rem(font-size, 1.8)
/*
prop: 1.8em;
prop: 1.8rem;
*/
公式ドキュメントにも、これについての記述はないっぽいので、諦めてnib(sassでいうCompass的な存在っぽい)のリポジトリ https://github.com/visionmedia/nib をあさる。
// good
to_rem(prop, font_size)
{prop}: unit(font_size, 'em')
{prop}: unit(font_size, 'rem')
to_rem(font-size, 1.8)
/*
font-size: 1.8em;
font-size: 1.8rem;
*/
やったぜ。
セレクタ文字列と変数が隣接してる場合とかでも、{}で囲むといいかんじに展開してくれるかんじです。いかにもマクロ的ですね。
nibは色々と機能を使いこなしてる感じなので、ドキュメント読んでもわかんないところがあったら読むと参考になります。