Is it possible to have a combined transform mixin in sass?
<p>I want to recreate the following with scss:</p>

<pre><code>transform: rotate(-20deg) scale(1) skew(-20deg)  translate(-40px);
</code></pre>

<p>But I want to avoid typing multiple browser prefixes so I have:</p>

<pre><code>@mixin transform($transforms) {
   -moz-transform: $transforms;
     -o-transform: $transforms;
    -ms-transform: $transforms;
-webkit-transform: $transforms;
      transform: $transforms;
</code></pre>

<p>}</p>

<p>Which works fine with individual transforms such as:</p>

<pre><code> @mixin scale($scale) {
 @include transform(scale($scale));
</code></pre>

<p>}</p>

<p>I have tried to include the functions</p>

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

<p>But it only combines them in succession which causes one to override the other.</p>

<pre><code>-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);
</code></pre>

<p>I tried combining it all in something like:</p>

<pre><code>@include transform: rotate(#{$val}deg) scale($val) skew(#{$val}deg)  translate($val);
</code></pre>

<p>I tried this but it did not work. Is it possible to combine maps to get something along these lines?</p>