title: How to apply multiple transform in SCSS using mixins?
body: <p>How can I apply more than one transform in SCSS using mixins? I want translate and rotate transform in button. I used mixins for transform.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
    
    &amp;: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);
    }
    
    &amp;:hover {
      color: #fff;
      
      &amp;:after {
        height: 260%;
        opacity: 1;
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="btn"&gt;Button&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Working Demo Here: <a href="https://codepen.io/anon/pen/MobqEQ" rel="nofollow noreferrer">https://codepen.io/anon/pen/MobqEQ</a></p>