指南针变换Mixin

Question

我有以下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做到这一点？

Answer 1

您必须指定要使用的转换，以空格分隔。例如：

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

Answer 2

我认为它应该是空格分隔的变换列表而不是逗号分隔。

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