Компас Transform Mixin

У меня есть следующий 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);
}

... и хотел бы реорганизовать это с помощью Compass Transform mixin.

В документации нет примеров, поэтому я попытался сделать это как снимок в темноте:

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

... и получить эту ошибку:

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

Есть ли способ сделать это с помощью Compass Transform?

Ответ 1

Вы должны указать, какие преобразования использовать, разделенные пробелами. например:

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

Ответ 2

Я считаю, что это должен быть раздел, разделенный пробелами, вместо преобразований, разделенных запятыми.

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