Combining multiple "transform" entries in Less - css

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

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 2

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