【Sass】自分で使いやすいと思うtranslateのmixinを作るった

CSS3のTransformでもMixinを作ってみました。
自分で使いやすくしようと考えて１つで

を記述することができるように無理やりまとめました。
コードはこちら。Transformを１つにまとめたSassのMixin。

いくつか例

ベンダープレフィックスは省略してます。

+transform(translate scale rotate skew, 10px 30px 20px, 0 0 0.4, 0 180deg 0, 20deg 0)

上の出力は下のようになります。

transform: translate3d(10px, 30px, 20px) scaleZ(0.4) rotateY(180deg) skewX(20deg);

使ったことないけどmatrixも

+transform(matrix, 0.5 0.2 0 0.5 200 50)
+transform(matrix, 2 0.2 0 0 0 0.5 0 0 0 0 4 0 100 50 25 1)

上の出力

transform: matrix(0.5, 0.2, 0, 0.5, 200, 50);
transform: matrix3d(2, 0.2, 0, 0, 0, 0.5, 0, 0, 0, 0, 4, 0, 100, 50, 25, 1);

Sassのif文はORのようなことが書けないんですよね。
||みたいなのが使えないのでこう書く。

@if $hoge-or-hage == 'hoge'
  // functionなどの処理
@else if $hoge-or-hage == 'hage'
  // 上をほぼ同じ処理

同じような処理なら長くなるし面倒臭いです。なら、代わりにindexを使ってみます。

@if index(('hoge', 'hage'), $hoge-or-hage)
  // functionなどの処理

index()は２番目の引数が１番目の値にあればその配列番号を、無ければfalseを返してくれるのでSassでORみたいにできますよ！

今回はSassで可変長引数というのを使ってみました。
プログラミングの本でコレのことは知っていたけど、「こんなもんいつ使うんだ」と思ってました。
いやぁ便利です。
こういうのをバリンバリン使える人になりたいです。

追記
Sass(Scss) Memo: @if | Culture27
andとかorとか使えた。。