Combinaison de plusieurs entrées "transformer" en moins

J'ai deux mixin qui à la fois se convertir à -webkit-transform:

.rotate(@deg) {
  -webkit-transform: rotate(@deg);
}

.scale(@factor) {
  -webkit-transform: scale(@factor);
}

Lorsque je les utilise ensemble:

div {
  .rotate(15deg);
  .scale(2);
}

... ils (comme prévu) montrer que:

div {
  -webkit-transform: rotate(15deg);
  -webkit-transform: scale(2);
}

Cela ne semble pas être valide CSS que le second a la préséance sur la première, la première est jeté. Pour combiner transform entrées, il devrait être:

-webkit-transform: rotate(15deg) scale(2);

Comment puis-je accomplir une telle CSS générés par MOINS, c'est à dire plusieurs transform entrées qui sont combinés correctement?

source d'informationauteur pimvdb

  1. 8

    Fournir votre transforme comme arguments pour une seule mixin:

    .transform(@scale,@rotate) {
  -webkit-transform: @arguments;
}

    je suppose que, vous avez également pu l'atteindre pour concaténer vos mixin en un seul avec l'aide des gardiens, mais je ne suis pas entièrement sûr;)

    Je pense que vous n'êtes pas en mesure d'obtenir d'une autre façon, depuis l'analyseur aurait à modifier le code par la suite ce qui ne devrait pas être possible.

  2. 8

    À partir de Moins de v1.7.0, la fusion des valeurs de propriété avec un espace comme séparateur est possible et il n'est pas nécessaire de club, les deux mixin dans un.

    Le Moins de code ci-dessous

    .rotate(@deg) {
  -webkit-transform+_: rotate(@deg);
}

.scale(@factor) {
  -webkit-transform+_: scale(@factor);
}

div{
    .rotate(45deg);
    .scale(1.5);
}

    de compiler dans le code CSS suivant:

    div {
  -webkit-transform: rotate(45deg) scale(1.5);
}
  3. 3

    Je pense qu'il y a un moyen simple de plus de, créer un div conteneur pour le eleemnt, et appliquer la première transformation de la cntainer, laissant le second à l'élément lui-même

  4. 1

    J'ai eu des problèmes à obtenir @arguments pour travailler. J'ai utilisé le @reste variable qui a fait le tour

    MOINS exemple:

    .transform(@rest...) {
   transform: @rest;
   -ms-transform: @rest;
   -webkit-transform: @rest;
}

.someClass{
   .transform(translate3D(0,0,0),scale(1,1));
}

.otherClass{
   .transform(translate3D(0,0,0),rotate(1,1));
}

.anotherClass{
   .transform(rotate(1,1));
}

    Sortie CSS:

    .someClass {
  transform: translate3D(0, 0, 0) scale(1, 1);
  -ms-transform: translate3D(0, 0, 0) scale(1, 1);
  -webkit-transform: translate3D(0, 0, 0) scale(1, 1);
}
.otherClass {
  transform: translate3D(0, 0, 0) rotate(1, 1);
  -ms-transform: translate3D(0, 0, 0) rotate(1, 1);
  -webkit-transform: translate3D(0, 0, 0) rotate(1, 1);
}
.anotherClass {
  transform: rotate(1, 1);
  -ms-transform: rotate(1, 1);
  -webkit-transform: rotate(1, 1);
}