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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在此进行演示：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));