指南针变换混合答案

【问题标题】：Compass Transform Mixin指南针变换混合
【发布时间】：2014-01-05 13:45:40
【问题描述】：

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

【问题讨论】：

值不应该是空格分隔的列表吗？喜欢@include transform (0deg 1 -50deg 2px);？
支持这样的语法吗？
@jayarjo 哦，我相信如果没有您的答案中的rotate(0deg) 等真实值，我提供的版本将无法工作，对吧？

标签： css sass transform compass-sass

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：