Multiple transforms using Compass

Question

I'm in the case where I have multiple transforms on one element, so my question is how do you translate this into Compass while keeping the named transforms:

-webkit-transform: translateY(-100%) scale(0.5);
-moz-transform: translateY(-100%) scale(0.5);
transform: translateY(-100%) scale(0.5);
-ms-transform: translateY(-100%) scale(0.5);

Something like : @include translateY(-100%) scale(0.5);

Thank you.

Solution

You need to use the transform mixin rather than the shortcut mixins for each specific transformation:

@include transform(translateY(-100%) scale(0.5));

It's pretty simple - just pass it the transforms you want, using the official css syntax.

Comments

[AliEzer]

Yep, that's it, completely missed it. Thank you for your time.

[Redzarf]

Just pointing out that the parameters are a space-separated list, not comma-separated (I didn't notice that at first)