루프의 변수 증가시키기

Question

다음과 같은 루프가 태그 클라우드에 대한 몇 가지 스타일을 생성합니다. 온라인 생성기에서 올바른 CSS 스타일을 고려해 볼 수 있습니다. 그러나 Visual Studio 솔루션 (2012)에서는 자동으로 CSS가 생성되므로 끊기는 것 같습니다. (아래 참조). VS less 생성기를 혼란스럽게하지 않으면 서 이와 같은 것을 생성하는 더 적절한 방법이 있습니까?

 @iterations: 10; 
     @maxSize: 40; 
     @minSize: 10; 

     .tag-loop (@i) when (@i > -1) { 
      @j: (@i*(30/@iterations) + @minSize); 
      li.tag-@{i} { 
       font-size:~"@{j}px"; 

      } 
      .tag-loop(@i - 1); 
     } 
     .tag-loop (@iterations); 

비주얼 스튜디오를 통해 생산 :

ul.tag-cloud li.tag-10 { 
    font-size: 10px; 
} 
ul.tag-cloud li.tag-9 { 
    font-size: 10px; 
} 
ul.tag-cloud li.tag-8 { 
    font-size: 10px; 
} 
ul.tag-cloud li.tag-7 { 
    font-size: 10px; 
} 
ul.tag-cloud li.tag-6 { 
    font-size: 10px; 
} 
ul.tag-cloud li.tag-5 { 
    font-size: 10px; 
} 
ul.tag-cloud li.tag-4 { 
    font-size: 10px; 
} 
ul.tag-cloud li.tag-3 { 
    font-size: 10px; 
} 
ul.tag-cloud li.tag-2 { 
    font-size: 10px; 
} 
ul.tag-cloud li.tag-1 { 
    font-size: 10px; 
} 
ul.tag-cloud li.tag-0 { 
    font-size: 10px; 
} 

내가 http://winless.org/online-less-compiler 같은 것을 사용하는 경우보다 정확하게 제작 다음

그것은 당신의 VS 사용하는 것 같습니다

li.tag-10 { 
    font-size: 40px; 
} 
li.tag-9 { 
    font-size: 37px; 
} 
li.tag-8 { 
    font-size: 34px; 
} 
li.tag-7 { 
    font-size: 31px; 
} 
li.tag-6 { 
    font-size: 28px; 
} 
li.tag-5 { 
    font-size: 25px; 
} 
li.tag-4 { 
    font-size: 22px; 
} 
li.tag-3 { 
    font-size: 19px; 
} 
li.tag-2 { 
    font-size: 16px; 
} 
li.tag-1 { 
    font-size: 13px; 
} 
li.tag-0 { 
    font-size: 10px; 
} 

Answer 1

(웹 에센셜 2012을 통해 ?) 꽤 오래됨 가변 범위를 상당히 다르게 처리하는 1.3.3 미만, 즉 마지막 반복에서 정의 된 @j이 이전의 모든을 무시합니다.정의. 해결 방법은 직접 글꼴 크기 값을 계산하는 것입니다.

@iterations: 10; 
    @maxSize: 40; 
    @minSize: 10; 

    .tag-loop (@i) when (@i > -1) { 
     li.tag-@{i} { 
      font-size: unit((@i * (30/@iterations) + @minSize), px); 
     } 
     .tag-loop((@i - 1)); 
    } 
    .tag-loop (@iterations);