Combinando múltiples entradas de "transformación" en Less

I have two mixins which both convert to -webkit-transform:

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

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

When I use them together:

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

... they (as expected) show up as:

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

This doesn't seem to be valid CSS as the second has precedence over the first; the first is discarded. To combine transform entries it should be:

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

How can I accomplish such CSS to be generated by LESS, i.e. multiple transform entries that are combined correctly?

preguntado el 09 de marzo de 12 a las 15:03

podrías proporcionar un violín? -

@Alp: I'm not sure how where to put LESS code there. It looks like only CSS and SCSS are available. Placing a <link> a un externo .less file gives a cross domain error. -

I know it's kind of late, but the reason for the cross domain error is your server was not sending the correct CORS headers back. JSFiddle did not have has to do anything in that case, unless you wanted it to send authentication, which you would have to coordinate with JSFiddle to do, and probably wouldn't have been worth it to do. -

@TylerH - I'm going to revert your edit. Less is already specified as tag of the Q so it should not appear in the title (also note the official name is Less not LESS). -

@seven-phases-max The edit is to make it clear for searches on the subject that this question is not useful for non-Less applications. Otherwise I would agree that Less shouldn't be in the title. -

4 Respuestas

Starting from Less v1.7.0, merging property values with a space separator is possible and there is no need to club the two mixins into one.

The below Less code

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

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

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

will compile into the following CSS:

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

respondido 04 nov., 14:13

Is there something similar in Sass (SCSS)? - tonix

Provide your transforms as arguments for a single mixin:

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

I guess, you also could achieve to concatenate your separate mixins into one with the help of guards, but I'm not entirely sure;)

I think you are not able to achieve this in another way, since the parser would have to modify code afterwards which should not be possible.

respondido 10 mar '12, 12:03

Thanks, this works, though I'm not fully enthousiastic about it. But it will do if there is no other option. - pimvdb

I filed a request aquí, but there hasn't been much progress. - pimvdb

hm, what ninique stated is basically the same thing which I proposed. I don't think they will implement such a feature because it contradicts the paradigm of the overriding nature of css and would call for lots of trouble... - Christoph

Yeah, in my opinion it is actually a mistake of CSS not to define rotation: 25deg; scale: 2; or something along the lines of that. - pimvdb

I think there is a simple way over it, create a div container for the eleemnt, and apply first transform to the cntainer, leaving the second one for the element itself

Respondido el 11 de diciembre de 12 a las 12:12

I was having problems getting @arguments to work. I used the @rest variable que hizo el truco

MENOS ejemplo:

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

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

Respondido 09 Abr '14, 20:04

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.