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
あんまりカッコを使いたくないんです。