Boussole Transformer Mixin

J'ai le code CSS suivant:

.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);
}

...et tiens à refactoriser cette avec la Boussole Transformer mixin.

Il n'y a pas d'exemples dans la documentation, j'ai donc essayé ceci comme un coup de feu dans l'obscurité:

.progress-bar {
  @include transform (0deg, 1, -50deg, 2px);
}

...et obtiens cette erreur:

Syntax error: Mixin transform takes 2 arguments but 4 were passed.

Est-il un moyen de le faire avec Boussole Transformer?

Ne pas les valeurs d'un espace séparé de la liste? Comme @include transform (0deg 1 -50deg 2px);?
Est telle la syntaxe prise en charge?
Oh, je crois que ma version ne serait pas sans le travail réel des valeurs telles que la rotate(0deg) que dans votre réponse, non?

OriginalL'auteur Ryan | 2013-12-17