Calculations with Less css

Asked

Viewed 32 times

1

I have the following mixin:

.mixin-loop (@i) when (@i > 0)  {
    .navigation .dropdown > li:nth-child(@{i}) {
        .vendor(animation, new-menu 200ms ease-in-out forwards);
    }
}

This . vendor being only a mixin for vendors:

.vendor(@property, @value) {
    -webkit-@{property}: @value;
     -moz-@{property}: @value;
       -ms-@{property}: @value;
            @{property}: @value;
}

How do I add + 200ms into this code every loop turn?

css less

1 answer

0

Just iterate a multiplier:

.vendor(@property, @value) {
  -webkit-@{property}: @value;
     -moz-@{property}: @value;
      -ms-@{property}: @value;
          @{property}: @value;
}

.mixin-loop (@i) when (@i > 0)  {
  .mixin-loop(@i - 1);
  .navigation .dropdown > li:nth-child(@{i}) {
    .vendor(animation, new-menu (200ms * @i) ease-in-out forwards);
  }
}

nav{
  .mixin-loop(8);
}

Browser other questions tagged css less

You are not signed in. Login or sign up in order to post.