読者です 読者をやめる 読者になる 読者になる

Milk+ea

Weblog Is My Hobby.

【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とか使えた。。