Calculations with Less css

Question

Calculations with Less css

Navigation

#1 by (0 votes)

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);
    }
}

Being that .vendor just a mixin for vendors:

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

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

css less

asked by anonymous 31.03.2017 / 19:42

1 answer

Connect the Asset Disposal Service (CNIB) XAMPP - New Security Concept

score 0 · Answer 1

Just iterate through 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);
}