web-dev-qa-db-ja.com

コンパス変換Mixin

次の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.

コンパス変換でこれを行う方法はありますか？

csssasstransformcompass-sass
14
Ryan

使用する変換をスペースで区切って指定する必要があります。例えば：

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

コンマ区切りではなく、スペースで区切られた変換のリストである必要があると思います。

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