Is it possible to have a combined transform mixin in sass? - css

Question

I want to recreate the following with scss:
transform: rotate(-20deg) scale(1) skew(-20deg) translate(-40px);
But I want to avoid typing multiple browser prefixes so I have:
#mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
Which works fine with individual transforms such as:
#mixin scale($scale) {
#include transform(scale($scale));
}
I have tried to include the functions
#mixin skewTitle($rot, $sca, $ske, $tran){
#include transform(scale($sca));
#include transform(skew(#{$ske}deg));
#include transform(translate($tran));
#include transform(rot(#{$rot}deg));
}
But it only combines them in succession which causes one to override the other.
-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);
I tried combining it all in something like:
#include transform: rotate(#{$val}deg) scale($val) skew(#{$val}deg) translate($val);
I tried this but it did not work. Is it possible to combine maps to get something along these lines?

Answer 1

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