Ошибка анализа при создании цикла с LESS

Question

Я создаю часы с CSS (LESS). Я добавляю цикл для выравнивания цифр по кругу с LESS-контурами. Но он показывает ошибку синтаксического анализа.

.clock-digits{ 
    position: absolute; 
    bottom: 50%; 
    left: 50%; 
    width: 2px; 
    height: @clock-digits/2; 
    transform-origin: bottom center; 
    &:after{ 
     content: attr(data-digit); 
     position: absolute; 
     top: 5px; 
     left: 50%; 
     display: block; 
     border-radius: 50%; 
     border: 1px solid red; 
     width: 30px; 
     height: 30px; 
     margin-left:(-30px/2); 
     font-size: 2em; 
     line-height: 30px; 
     text-align: center; 
    } 
    .mixin-loop (@i) when (@i > 0){ 
     &:nth-child(@{i}){ 
      transform: rotate((@{i} * 360/@clock-digits)deg); 
      &:after{ 
       transform: rotate(-(@{i} * 360/@clock-digits)deg); 
      } 
     } 
     .mixin-loop(@i - 1); 
    } 

    .mixin-loop(@clock-digits); 
} 

Может ли кто-нибудь помочь мне с этим, пожалуйста? Пробовал много решить, но не мог понять.

Answer 1

Проблема заключается в @{i} в математической операции в mixin. Формат @{var} необходим только при интерполяции (переменная/селектор/свойство). Для этого случая достаточно всего @i.

.mixin-loop (@i) when (@i > 0){ 
    &:nth-child(@{i}){ 
     transform: rotate(unit((@i * 360/@clock-digits),deg)); 
     &:after{ 
      transform: rotate(unit(-(@i * 360/@clock-digits),deg)); 
     } 
    } 
    .mixin-loop(@i - 1); 
} 

Дополнительное примечание: Кроме того, лучше использовать встроенный в unit() функции с deg как второй параметр для преобразования числа степеней, чем с помощью конкатенации.