LESS: Mixin with a unique argument to manage css3 transitions

Question

Using LESS CSS, I would like to simplify my code using Mixins to put "out" transitions declarations, but the following syntax is wrong. The problem is in the attribute @color-time definition that has 2 arguments:

.links-transition (@color-time:color 1s, border-color 1s)
{
  -webkit-transition:@color-time;
     -moz-transition:@color-time;
      -ms-transition:@color-time;
       -o-transition:@color-time;
          transition:@color-time;
}

a
{
  color:red;
  .links-transition;
}

In official documentation I found that putting a ; at the end, teach LESS how to consider arguments, considering them separated by ;, so one argument in my case like this:

.links-transition (@color-time:color 1s, border-color 1s;)

Unfortunately this does not run. I think it depends since white space... is there a correct syntax to obtain the correct CSS without using 2 arguments in Mixin recall?

Thank you.

Just answered [a similar question here with a multiple input allowed, flexible way of handling transitions](http://stackoverflow.com/questions/10412643/can-i-define-a-less-mixin-to-generate-a-transition-property-with-a-variable-numb/20810461#20810461). — ScottS, Dec 28 '13 at 02:44

score 2 · Accepted Answer · edited May 23 '17 at 11:55

You can use string escaping and interpolation like this:

.links-transition (@arg:"color 1s, border-color 1s") {
  @color-time: ~"@{arg}";
  -webkit-transition:@color-time;
     -moz-transition:@color-time;
      -ms-transition:@color-time;
       -o-transition:@color-time;
          transition:@color-time;
}

a {
  color:red;
  .links-transition ("color 2s, border-color 2s");
}

it will return this CSS:

a {
  color: red;
  -webkit-transition: color 2s, border-color 2s;
  -moz-transition: color 2s, border-color 2s;
  -ms-transition: color 2s, border-color 2s;
  -o-transition: color 2s, border-color 2s;
  transition: color 2s, border-color 2s;
}

hope this does what you want.

For more ideas: there are some additinal approaches/solutions that you can find on SO, like this two for example:

Update: in LESS 1.4 beta it works the way you wanted to do it:

.links-transition (@color-time: color 1s, border-color 1s;) {
  -webkit-transition:@color-time;
     -moz-transition:@color-time;
      -ms-transition:@color-time;
       -o-transition:@color-time;
          transition:@color-time;
}

a {
  color:red;
  .links-transition (color 2s, border-color 2s;);
}

has the same output as the above solution. Comma separated argunets are possible since 1.3.2, however they can apparently not include whitespaces.

LESS: Mixin with a unique argument to manage css3 transitions

1 Answers1

Update: in LESS 1.4 beta it works the way you wanted to do it: