指南针变换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有办法实现这个吗？

- Ryan

---

值不应该是以空格分隔的列表吗？像 @include transform (0deg 1 -50deg 2px); 这样？ - kleinfreund

这种语法受支持吗？ - jayarjo

@jayarjo 噢，我相信我的提供的版本如果没有像你的答案中那样的实际值，比如 rotate(0deg)，是无法正常工作的，对吗？ - kleinfreund

Answer 1

您需要指定要使用的变换，用空格分隔。例如：

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

- RhinoWalrus

Answer 2

我认为应该使用空格分隔的转换列表，而不是逗号分隔。

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

- jayarjo