Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Less style sheet language: prevent parentheses from being omitted in compiled CSS

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; }
like image 890
Alan Avatar asked Apr 30 '13 00:04

Alan


1 Answers

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);
}
like image 115
ferne97 Avatar answered Sep 18 '22 10:09

ferne97