LESS CSS - 函數中的不同元素

Question

我使用LESS CSS。我的代碼看起來像這樣。

重複模式

你看在我的代碼的模式？唯一不同的是填充值和類名。

問題

是否有可能在更短的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

是的，你只需要在LESS中設置合適的計數和循環結構。具體方法如下：

LESS

.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; 
}