指南针变换混合

Posted 2023-03-07

【中文标题】指南针变换混合

【英文标题】：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) 等真实值，我提供的版本将无法工作，对吧？

【参考方案1】：

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

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

【参考方案2】：

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

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