CSS 指南针变换 Mixin
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20640222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Compass Transform Mixin
提问by Ryan
I have the following CSS:
我有以下 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);
}
...and would like to refactor this with the Compass Transformmixin.
...并想用Compass Transformmixin重构它。
There are no examples in the documentation, so I tried this as a shot in the dark:
文档中没有示例，所以我在黑暗中尝试了这个：
.progress-bar {
@include transform (0deg, 1, -50deg, 2px);
}
...and get this error:
...并收到此错误：
Syntax error: Mixin transform takes 2 arguments but 4 were passed.
Is there a way to do this with Compass Transform?
有没有办法用 Compass Transform 做到这一点？
回答by RhinoWalrus
You have to specify what transforms to use, separated by spaces. eg:
您必须指定要使用的转换，用空格分隔。例如：
@include transform(rotate(-135deg) skew(-10deg, -10deg));
回答by jayarjo
I believe it should be space separated list of transforms rather than comma-separated.
我相信它应该是空格分隔的转换列表而不是逗号分隔。
.progress-bar {
@include transform (rotate(0deg) scale(1) skew(-50deg) translate(2px));
}
