CODEWITHSUNDEEP
csssasstransformcompass-sass
Ryan
Ryan

Reputation: 6217

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) 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?

Upvotes: 14

Views: 33880

Answers (2)

RhinoWalrus
RhinoWalrus

Reputation: 3089

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

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

Upvotes: 42

jayarjo
jayarjo

Reputation: 16716

I believe it should be space separated list of transforms rather than comma-separated.

.progress-bar {
  @include transform (rotate(0deg) scale(1) skew(-50deg) translate(2px));
}

Upvotes: 3

Related Questions