Wie man mehrere Transform in SCSS mit Mixins anwenden?

Question

Wie kann ich mehr als eine Transformation in SCSS mit Mixins anwenden? Ich möchte übersetzen und drehen in Schaltfläche umwandeln. Ich habe Mixins für die Transformation verwendet. Hier

@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>

Arbeits Demo: https://codepen.io/anon/pen/MobqEQ

Answer 1

Aus Gründen der Einfachheit, anstelle des Schreibens dieser

-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); 

nur direkt Ihr erklärt mixin verwenden,

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