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));

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

1 个答案: