Combining multiple “transform” entries in Less

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

I was having problems getting @arguments to work. I used the @rest variable which did the trick

LESS example:

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