I'm using {less} and ran into a problem with using parenthesis. I wrote a mixin for a CSS3 transform property. I can't figure out how to have a parenthesis in the compiled CSS. Less sees the parentheses as an operation and omits them.
Original CSS:
.plus {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg); }
Less mixin I wrote:
.transform (@action, @value){
-webkit-transform: @action(@value);
-moz-transform: @action(@value);
-o-transform: @action(@value); }
And the compiled CSS that results:
.plus {
-webkit-transform: rotate 45deg;
-moz-transform: rotate 45deg;
-o-transform: rotate 45deg; }
You could just keep it as one value and pass in whatever you need when you are calling it.
.transform(@value) {
-webkit-transform: @arguments;
-moz-transform: @arguments;
transform: @arguments;
}
.plus {
.transform(rotate(45deg));
.transform(scale(1.5, 2.0));
}
compiles to
.plus {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform: scale(1.5, 2);
-moz-transform: scale(1.5, 2);
transform: scale(1.5, 2);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With