css - 是否可以在 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);

我试过了，但是没用。是否有可能结合 map 来沿着这些路线得到一些东西？

Answer 1

使用

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