Currently, I am attempting to create a LESS mixin that can take a numerical value (degrees for rotation) and generate the appropriate CSS code to rotate an element. However, I am facing difficulties trying to handle both "270deg" and the integer "3" (which is equal to 270/90) for Internet Explorer. I have experimented with different methods including:
.rotate(@rotation: 0) {
@deg: deg;
-webkit-transform: rotate(@rotation deg); // this approach doesn't seem to work as expected
-moz-transform: rotate((@rotation)deg); // utilizing parentheses
-o-transform: rotate(@rotation+deg); // combining variable and keyword
transform: rotate(@rotation+@deg); // concatenating two variables
// The main issue arises when trying to use @rotation as just a number:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation/90);
}
.someElement {
.rotate(270)
}
At the moment, I have resorted to adjusting the compiler script to avoid adding a space between variable and keyword concatenation. Ideally, I am hoping for a more efficient solution.