Меньше цикла для увеличения заполнения в UL> LI> A

Question

В моем html-файле есть следующая иерархия.

<ul>
  <li>
  <a></a>
   <ul>
   <li>
   <a></a>
     <ul>
      <li>
      <a></a>
      </li>
     </ul>
   </li>
  </ul>
 </li>
</ul>

Я хочу увеличить отступ только в элементе привязки.Я придумал следующий цикл в less, но он только увеличивает отступ в ul li.Я не могу понять, как выбрать элемент привязки.

.make-nested-lists(5);

.make-nested-lists(@n, @i: 0) when (@i < @n) {
    ul li {
        padding-left: (30px + 15 * @i);
        .make-nested-lists(@n, (@i + 1));
    }
}

Answer 1

добавить p добавить к вашей ссылке (а), а не на элементе li.

Answer 2

Просто добавьте padding на a вместо li:

.make-nested-lists(5);

.make-nested-lists(@n, @i: 0) when (@i < @n) {
    ul li {
        a{
            padding-left: (30px + 15 * @i);
        }

        .make-nested-lists(@n, (@i + 1));
    }
}

Демо (с скомпилированным LESS):

ul li a{padding-left:30px}ul li ul li a{padding-left:45px}ul li ul li ul li a{padding-left:60px}ul li ul li ul li ul li a{padding-left:75px}ul li ul li ul li ul li ul li a{padding-left:90px}

<ul>
  <li>
    <a>test 1</a>
    <ul>
      <li>
        <a>test 2</a>
        <ul>
          <li>
            <a>test 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>