나는이 <strong>SCSS</strong> 코드를 가지고 어떻게 CSS LESS

Question

의 속성 값을 루프 클래스에 CSS이로 컴파일

.order { 
    @for $i from 1 through 3 { 
    &--#{$i} { order: $i; } 
    } 
} 

.order--1 { 
    order: 1; 
} 
.order--2 { 
    order: 2; 
} 
.order--3 { 
    order: 3; 
} 

내가 CSS를 에서 동일한 기능을 수행하는 방법 덜?

Answer 1

@i: 1; 
.order (@i) when (@i <= 3) { 
    .order--@{i} { 
     order: ~"@{i}"; 
    } 
    .order(@i + 1); 
} 
.order (@i); 

결과는 다음과 같습니다 HTTP 중 어느

.order--1 { 
    order: 1; 
} 
.order--2 { 
    order: 2; 
} 
.order--3 { 
    order: 3; 
} 

Answer 2

적은 코드의이 조각 : 그 CSS에서

.order(@n, @i: 1) when (@i =< @n) { 
    .order--@{i} { 
    order: @i; 
    } 
    .order(@n, (@i + 1)); 
} 

.order(3); 

결과 :

.order--1 { 
    order: 1; 
} 
.order--2 { 
    order: 2; 
} 
.order--3 { 
    order: 3; 
}