덜 CSS - 기능의 다른 요소

Question

나는 덜 CSS를 사용합니다. 내 코드는 다음과 같습니다.

반복 패턴

당신은 내 코드의 패턴을 볼 수 있습니까? 두 가지 차이점은 패딩 값과 클래스 이름뿐입니다.

질문

은 많은 다른 요소와이 같은 블록의 기능/믹스 인을 만들기 위해 LESS CSS에서 수 있습니까?

LESS CSS

&.pad-10 > [class*='cols-'] { 
    background: #ccc; 
    padding: 10px; 

    &:first-child { 
     padding-left: 0; 
    } 

    &:last-child { 
     padding-right: 0; 
    } 
} 

&.pad-20 > [class*='cols-'] { 
    background: #ccc; 
    padding: 20px; 

    &:first-child { 
     padding-left: 0; 
    } 

    &:last-child { 
     padding-right: 0; 
    } 
} 

믹스 인 제안

do_padding($value) { 
     &.pad-@value > [class*='cols-'] { 
      background: #ccc; 
      padding: @valuepx; 

     &:first-child { 
      padding-left: 0; 
     } 

     &:last-child { 
      padding-right: 0; 
     } 
    } 

    do_padding(10); 
    do_padding(20); 

내 정확한 문제는 LESS CSS하지 않고 다른 방법으로 해결 될 수 있다는 것을 알고,하지만 난에 시간이 문제가 시각.

Answer 1

예, 적절한 계산 및 반복 구조를 덜 필요로 설정하면됩니다.

.do_padding(@startValue, @increment) { 

    .loop(@value) when (@value > 0) { 
    //set top amount 
    &.pad-@{value} > [class*='cols-'] { 
     background: #ccc; 
     padding: @value * 1px; 

     &:first-child { 
     padding-left: 0; 
     } 

     &:last-child { 
     padding-right: 0; 
     } 
    } 
    // next iteration 
    .loop(@value - @increment); 
    } 

    // end the loop when index is 0 or less 
    .loop(@value) when not (@value > 0) {} 

    //start the loop 
    .loop(@startValue); 
} 

이

.myClass { 
    .do_padding(30, 10); 
} 

CSS 출력

.myClass.pad-30 > [class*='cols-'] { 
    background: #ccc; 
    padding: 30px; 
} 
.myClass.pad-30 > [class*='cols-']:first-child { 
    padding-left: 0; 
} 
.myClass.pad-30 > [class*='cols-']:last-child { 
    padding-right: 0; 
} 
.myClass.pad-20 > [class*='cols-'] { 
    background: #ccc; 
    padding: 20px; 
} 
.myClass.pad-20 > [class*='cols-']:first-child { 
    padding-left: 0; 
} 
.myClass.pad-20 > [class*='cols-']:last-child { 
    padding-right: 0; 
} 
.myClass.pad-10 > [class*='cols-'] { 
    background: #ccc; 
    padding: 10px; 
} 
.myClass.pad-10 > [class*='cols-']:first-child { 
    padding-left: 0; 
} 
.myClass.pad-10 > [class*='cols-']:last-child { 
    padding-right: 0; 
} 

를 사용

LESS 방법은 다음과 같습니다 :