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.
.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);
}
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;
}
a {
-moz-transition: color opacity .5s;
-webkit-transition: color opacity .5s;
-o-transition: color opacity .5s;
transition: color opacity .5s;
}
Any ideas?
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.