LESS transition mixin

Question

Can someone show how to use the following LESS mixin to transition the following property for .25s with linear ease?

border-top: 6px solid #ff3300;

.transition-properties(...) {
@props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
-webkit-transition-property: @props;
-moz-transition-property: @props;
-o-transition-property: @props;
transition-property: @props;
}

Answer 1

Update: LESS 1.4+ Capability

With LESS 1.4, the javascript used in the original answer for the comma separated arguments is not needed. Instead, the use of a "dummy" semicolon at the end of the argument string causes the commas to be viewed as list separators, not argument separators, so this works now when imputing multiple transitions:

LESS 1.4+

The semicolon in the mixin call (.transition-properties(border-top .25s linear, color .5s linear;);)is very important. If it is ommited, the comma between the two parameters will be deleted which ends up in an invalid css rule.

.transition-properties(...) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}


.yourClass {
  border-top: 1px solid black;
  .transition-properties(border-top .25s linear, color .5s linear;); /* semicolon is necessary */
}                                                                |
                                                          NOTE THIS SEMICOLON

.yourClass:hover {
  border-top: 6px solid #ff3300;
}

CSS Output

Note the comma stayed between the two property values:

.yourClass {
  border-top: 1px solid black;
  -webkit-transition: border-top 0.25s linear, color 0.5s linear;
  -moz-transition: border-top 0.25s linear, color 0.5s linear;
  -o-transition: border-top 0.25s linear, color 0.5s linear;
  transition: border-top 0.25s linear, color 0.5s linear;
}
.yourClass:hover {
  border-top: 6px solid #ff3300;
}

Original Answer [Pre LESS 1.4]

Obviously, specifics will depend on your exact implementation. However, this illustrates in general how you would use it:

LESS

.transition-properties(...) {
@props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
-webkit-transition: @props;
-moz-transition: @props;
-o-transition: @props;
transition: @props;
}


.yourClass {
  border-top: 1px solid black;
  .transition-properties(border-top .25s linear);
}

.yourClass:hover {
  border-top: 6px solid #ff3300;
}

CSS Output

.yourClass {
  border-top: 1px solid black;
  -webkit-transition: border-top 0.25s linear;
  -moz-transition: border-top 0.25s linear;
  -o-transition: border-top 0.25s linear;
  transition: border-top 0.25s linear;
}
.yourClass:hover {
  border-top: 6px solid #ff3300;
}

See Example Fiddle

Explanation

What the

@props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;

allows you to do is put in multiple comma separated transitions, say:

.transition-properties(border-top .25s linear, color 1s linear);

Which will compile to keep them separated by a comma (just one line shown for example):

transition: border-top 0.25s linear, color 1s linear;

If you just used the straight @arguments you end up with no comma separation:

transition: border-top 0.25s linear color 1s linear;

Which is not correct for the property.