用SASS写transform()的学习记录

刚开始学习SASS，我想用@mixin来化简transform()方法，根据文档写了以下代码：

@mixin transform ($deg){
    transform:rotate($deg);
    -ms-transform:rotate($deg); /* IE 9 */
    -moz-transform:rotate($deg); /* Firefox */
    -webkit-transform:rotate($deg); /* Safari and Chrome */
    -o-transform:rotate($deg); /* Opera */
}

div{
    @include transform(90deg);
}

但是若要加上所有的CSS 2D转换，这样的写法并没有简洁到哪里去，后上网搜索到如下代码：

// generic transform
@mixin transform($transforms) {
       -moz-transform: $transforms;
         -o-transform: $transforms;
        -ms-transform: $transforms;
    -webkit-transform: $transforms;
          transform: $transforms;
}
// rotate
@mixin rotate ($deg) {
  @include transform(rotate(#{$deg}deg));
}

// scale
@mixin scale($scale) {
     @include transform(scale($scale));
} 
// translate
@mixin translate ($x, $y) {
   @include transform(translate($x, $y));
}
// skew
@mixin skew ($x, $y) {
   @include transform(skew(#{$x}deg, #{$y}deg));
}
//transform origin
@mixin transform-origin ($origin) {
    moz-transform-origin: $origin;
         -o-transform-origin: $origin;
        -ms-transform-origin: $origin;
    -webkit-transform-origin: $origin;
          transform-origin: $origin;
}


.test {
  @include skew(25,10);
  @include transform-origin(top left);
}

所有的方法都得到了概括。