CODEWITHSUNDEEP
lessmixins
Luca Detomi
Luca Detomi

Reputation: 5716

LESS: Mixin with a unique argument to manage css3 transitions

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.

Upvotes: 1

Views: 169

Answers (1)

Martin Turjak
Martin Turjak

Reputation: 21234

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.

Upvotes: 2

Related Questions