如何使用mixins在SCSS中应用多重转换？

Question

如何使用mixins在SCSS中应用多个转换？我想翻译和旋转按钮中的变换。我用mixin进行转换。

@mixin transition($transition...) { 
 
    /* defining prefixes so we can use them in mixins below*/ 
 
    $prefixes:  ("-webkit", "-ms", "-o", ""); 
 
    @each $prefix in $prefixes { 
 
    #{$prefix}-transition: $transition; 
 
    } 
 

 
    transition: $transition; 
 
} 
 
@mixin transform($transforms) { 
 
    -moz-transform: $transforms; 
 
    -o-transform: $transforms; 
 
    -ms-transform: $transforms; 
 
    -webkit-transform: $transforms; 
 
    transform: $transforms; 
 
} 
 

 
// translate 
 
@mixin translate ($x, $y) { 
 
    @include transform(translate($x, $y)); 
 
} 
 
// rotate 
 
@mixin rotate ($deg) { 
 
    @include transform(rotate(#{$deg}deg)); 
 
} 
 

 
.btn { 
 
    border: 2px solid green;; 
 
    border-radius: 2px; 
 
    color: green; 
 
    cursor: pointer; 
 
    font-size:15px; 
 
    display: inline-block; 
 
    letter-spacing: 0.1em; 
 
    min-width: 130px; 
 
    padding: 10px 20px; 
 
    position:relative; 
 
    text-align: text-center; 
 
    text-transform: uppercase; 
 
    @include transition(all 0.5s ease 0s); 
 
    overflow: hidden; 
 
    
 
    &:after { 
 
    background: green; 
 
    content: ""; 
 
    height: 0; 
 
    left: 50%; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
    z-index: -1; 
 
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); 
 
    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg); 
 
    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg); 
 
    transform: translateX(-50%) translateY(-50%) rotate(45deg); 
 
    @include transition(all 0.3s ease 0s); 
 
    } 
 
    
 
    &:hover { 
 
    color: #fff; 
 
    
 
    &:after { 
 
     height: 260%; 
 
     opacity: 1; 
 
    } 
 
    } 
 
}

<button class="btn">Button</button>

工作演示在这里：https://codepen.io/anon/pen/MobqEQ

Answer 1

为了简单起见，而不是写这个

-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); 
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg); 
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg); 
transform: translateX(-50%) translateY(-50%) rotate(45deg); 

只需直接使用你的声明的mixin，

@include transform(translateX(-50%) translateY(-50%) rotate(45deg));