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?

css combinations less css-transforms
Edit
Report