Milk+ea

Weblog Is My Hobby.

SassでTransformのMixin

こんな感じで使う。

+trf(skewX 1, translate 1em 2em 3em, scale .5 2, rotate 1 2 3 90deg)

結果はこう。

-webkit-transform: skewX(1) translate3d(1em, 2em, 3em) scale(0.5, 2) rotate3d(1, 2, 3, 90deg);
-ms-transform: skewX(1) translate3d(1em, 2em, 3em) scale(0.5, 2) rotate3d(1, 2, 3, 90deg);
transform: skewX(1) translate3d(1em, 2em, 3em) scale(0.5, 2) rotate3d(1, 2, 3, 90deg);

末尾がX、Y、Zのモノはそのまま書く。
末尾がないものは引数のサイズで3dを付けたりする。

つまり3dとは書かなくていいという。

Mixin

@function to_func_form($func, $val)
  @return unquote('#{$func}(#{$val})')

@function translate($vals)
  $len: length($vals)
  @if $len == 2
    @return unquote('translate(#{$vals})')
  @else if $len == 3
    @return translate3d($vals)

@function scale($vals)
  $len: length($vals)
  @if $len == 2
    @return unquote('scale(#{$vals})')
  @else if $len == 3
    @return scale3d($vals)

@function rotate($vals)
  $len: length($vals)
  @if $len == 1
    @return unquote('rotate(#{$vals})')
  @else if $len == 4
    @return rotate3d($vals)

@function matrix($vals)
  $len: length($vals)
  @if $len == 6
    @return unquote('matrix(#{$vals})')
  @else if $len == 16
    @return matrix3d($vals)

=trf($func_to_val...)
  $result: ()
  @each $v in $func_to_val
    $len : length($v)
    $func: nth($v, 1)
    $val : ()
    @for $i from 2 through $len
      $val: append($val, nth($v, $i), comma)
    $unit: null

    @if $func == 'translate'
      $unit: translate($val)
    @else if $func == 'rotate'
      $unit: rotate($val)
    @else if $func == 'scale'
      $unit: scale($val)
    @else if $func == 'matrix'
      $unit: matrix($val)
    @else
      $unit: to_func_form($func, $val)
    $result: append($result, $unit)

  @each $p in -webkit-, -ms-, null
    #{$p}transform: $result

あんまりカッコを使いたくないんです。