Multiple transforms using Compass

css sass transform compass-sass
AliEzer picture AliEzer · Jun 17, 2013 · Viewed 13.3k times · Source

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.

Answer

Miriam Suzanne picture Miriam Suzanne · Jun 17, 2013

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.

Related questions

Compass Transform Mixin

I have the following CSS: .progress-bar { transform: rotate(0deg) scale(1) skew(-50deg) translate(2px); -webkit-transform: rotate(0deg) scale(1) skew(-50deg) translate(2px); -moz-transform: rotate(0deg) scale(1) skew(-50deg) translate(2px); -o-transform: rotate(0deg) scale(1) skew(-50deg) …

Read More
What's the difference between SCSS and Sass?

From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support. What's the difference with SCSS? Is it supposed to be the same language? Similar? Different?

Read More
Sass Variable in CSS calc() function

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code: $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) If I use the literal 50px instead of my …

Read More