lessless-mixins

Multiple properties are getting treated as separate arguments in mixins


I'm trying to write a mixin, but I can't seem to get the arguments working the way I want: multiple properties are getting treated each as a separate argument.

Current Code

.transition(@property: all, @time: 1s, @timing: ease-in-out) {
    -moz-transition: @property @time @timing;
    -webkit-transition: @property @time @timing;
    -o-transition: @property @time @timing;
    transition: @property @time @timing;
}

a {
    .transition(color, opacity, .5s);
}

Desired Output

a {
    -moz-transition: color, opacity .5s ease-in-out;
    -webkit-transition: color, opacity .5s ease-in-out;
    -o-transition: color, opacity .5s ease-in-out;
    transition: color, opacity .5s ease-in-out; 
}

Actual Output

a {
    -moz-transition: color opacity .5s;
    -webkit-transition: color opacity .5s;
    -o-transition: color opacity .5s;
    transition: color opacity .5s;  
}

Any ideas?


Solution

  • I'd suggest using LESS's escape function, i.e.:

    a:link, a:visited { 
        color: green;
        opacity: .5;
        font-size: 1em;
    }
    
    a:hover {
        color: red;
        opacity: 1;
        font-size: 2em;
        .transition(e("font-size, color"));
    }
    

    And though it seems that LESS accepts that, it will only animate the last property in the comma-separated string you send through. A pity.