web-dev-qa-db-fra.com

Compass Transform Mixin

J'ai le 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 je voudrais refactoriser cela avec le mixin Compass Transform .

Il n'y a pas d'exemples dans la documentation, j'ai donc essayé cela comme une photo dans le noir:

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

... et obtenez cette erreur:

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

Existe-t-il un moyen de le faire avec Compass Transform?

csssasstransformcompass-sass
14
Ryan

Vous devez spécifier les transformations à utiliser, séparées par des espaces. par exemple:

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

Je pense qu'il devrait s'agir d'une liste de transformations séparées par des espaces plutôt que séparées par des virgules.

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