引数つきMixin
Mixinは引数を受け付けるようにでき、関数のように使うことが可能です。
// 引数を受け取るmixin =test(!color) color = !color border: 1px solid #{!color*3} .foo // 引数つきでmixinを適用する。 +test(#111) font-size: 12px .var +test(#222) font-size: 24px
変換結果です。
.foo { color: #111111; border: 1px solid #333333; font-size: 12px; } .var { color: #222222; border: 1px solid #666666; font-size: 24px; }
再帰とかもできたり。
=test(!i) c#{!i} color = #111 * !i border: 1px solid #{#131313 * !i} // i > 0 なら再帰 @if !i > 0 +test( !i - 1 ) .foo +test(3)
変換結果です。
.foo c3 { color: #333333; border: 1px solid #393939; } .foo c2 { color: #222222; border: 1px solid #262626; } .foo c1 { color: #111111; border: 1px solid #131313; } .foo c0 { color: black; border: 1px solid black; }