Compass Transform Mixin

css sass transform compass-sass
Ryan picture Ryan · Dec 17, 2013 · Viewed 33.4k times · Source

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) translate(2px);
  -ms-transform: rotate(0deg) scale(1) skew(-50deg) translate(2px);
}

...and would like to refactor this with the Compass Transform mixin.

There are no examples in the documentation, so I tried this as a shot in the dark:

.progress-bar {
  @include transform (0deg, 1, -50deg, 2px);
}

...and get this error:

Syntax error: Mixin transform takes 2 arguments but 4 were passed.

Is there a way to do this with Compass Transform?

Answer

RhinoWalrus picture RhinoWalrus · Dec 17, 2013

You have to specify what transforms to use, separated by spaces. eg:

@include transform(rotate(-135deg) skew(-10deg, -10deg));

Related questions

Multiple transforms using Compass

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

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