是否可以在 sass 中使用组合转换 mixin？

Question

我想用 scss 重新创建以下内容：

transform: rotate(-20deg) scale(1) skew(-20deg)  translate(-40px);

但我想避免输入多个浏览器前缀，所以我有：

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

}

这适用于单独的转换，例如：

 @mixin scale($scale) {
 @include transform(scale($scale));

}

我已尝试包含函数

 @mixin skewTitle($rot, $sca, $ske, $tran){
  @include transform(scale($sca));
  @include transform(skew(#{$ske}deg));
  @include transform(translate($tran));
  @include transform(rot(#{$rot}deg));
}

但它只是将它们连续组合，导致其中一个覆盖另一个。

-moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  -ms-transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
  -moz-transform: translate(-40px);
  -o-transform: translate(-40px);
  -ms-transform: translate(-40px);
  -webkit-transform: translate(-40px);
  transform: translate(-40px);

我尝试将它们组合成这样的：

@include transform: rotate(#{$val}deg) scale($val) skew(#{$val}deg)  translate($val);

我试过了，但是没有用。是否可以结合地图来获得这些方面的东西？

Answer 1

使用

@include transform(rotate(-20deg) scale(1) skew(-20deg) translate(-40px));