【Sass】自分で使いやすいと思うtranslateのmixinを作るった
CSS3のTransformでもMixinを作ってみました。
自分で使いやすくしようと考えて1つで
- translate
- scale
- rotate
- skew
- matrix
を記述することができるように無理やりまとめました。
コードはこちら。Transformを1つにまとめたSassのMixin。
いくつか例
ベンダープレフィックスは省略してます。
+transform(translate scale rotate skew, 10px 30px 20px, 0 0 0.4, 0 180deg 0, 20deg 0)
- translateやscaleはカンマじゃなくスペースで区切ったリストで1番目の引数に
- 2番目以降にそれらの値を
- 2番目の引数はtranslate、3番目の引数はscale...みたいな感じ
上の出力は下のようになります。
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()は2番目の引数が1番目の値にあればその配列番号を、無ければfalseを返してくれるのでSassでORみたいにできますよ!
今回はSassで可変長引数というのを使ってみました。
プログラミングの本でコレのことは知っていたけど、「こんなもんいつ使うんだ」と思ってました。
いやぁ便利です。
こういうのをバリンバリン使える人になりたいです。
追記
Sass(Scss) Memo: @if | Culture27
andとかorとか使えた。。