Css 在sass中是否可能有一个组合变换混合？

我想用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);

我试过了，但没用。有没有可能通过组合地图来获得这些方面的信息？

使用

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

使用

---

为什么不像

@include transform（rotate（#{$rot}deg）scale（#{$sca}）skew（#{$ske}deg）translate（#{$tran}px））那样编写呢？它适用于我@sassmeister.com你能举个例子吗？这对我不起作用<代码>@mixin skewTitle（$rot，$sca，$ske，$tran）{@include transform（rotate（#{$rot}deg）scale（#{$sca}）skew（#{$ske}deg）translate（#{$tran}px））}

请检查。点击“查看已编译”按钮查看已编译的CSS。嘿，这是一个“逗号”的情况。谢谢为什么不像

@include transform（rotate（#{$rot}deg）scale（#{$sca}）skew（#{$ske}deg）translate（#{$tran}px））那样编写呢？它适用于我@sassmeister.com你能举个例子吗？这对我不起作用<代码>@mixin skewTitle（$rot，$sca，$ske，$tran）{@include transform（rotate（#{$rot}deg）scale（#{$sca}）skew（#{$ske}deg）translate（#{$tran}px））}

请检查。点击“查看已编译”按钮查看已编译的CSS。嘿，这是一个“逗号”的情况。谢谢添加一些关于这个答案如何帮助OP解决当前问题的解释。虽然这个代码片段可以解决这个问题，但它确实有助于提高您文章的质量。请记住，您将在将来回答读者的问题，而这些人可能不知道您的代码建议的原因。请添加一些解释，说明此答案如何帮助解决当前问题。虽然此代码片段可以解决问题，但确实有助于提高您文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。