LESS mixin：如何循環傳遞參數

Question

我通常編寫SASS，但對於特定項目，我必須使用LESS。

我該如何用下面的方法實現下面的功能？使用sass可以將mixin稱爲像@include align（hcenter top），以在中間和頂部水平放置元素。

@mixin align($styles) { 
    position: absolute; 
    content: ''; 
    display: block; 

    @each $style in $styles { 

     @if ($style == center) { 
      margin-left: auto; 
      margin-right: auto; 
      margin-top: auto; 
      margin-bottom: auto; 
      left: 0; 
      right: 0; 
      top: 0; 
      bottom: 0; 
     } 
     @if ($style == hcenter) { 
      margin-left: auto; 
      margin-right: auto; 
      left: 0; 
      right: 0; 
     } 
     @if ($style == vcenter) { 
      margin-top: auto; 
      margin-bottom: auto; 
      top: 0; 
      bottom: 0; 
     } 
     @if ($style == top) { 
      top: 0; 
     } 
     @if ($style == bottom) { 
      bottom: 0; 
     } 
     @if ($style == right) { 
      right: 0; 
     } 
     @if ($style == left) { 
      left: 0; 
     } 

    } 

} 

Answer 1

見Mixin Arguments，List Functions和Loops。

有了這樣"for"事物的片段可以轉換爲類似：

@import "loops/for"; 

#usage { 
    .align(hcenter, top, bottom, etc); 
} 

.align(@styles...) { 
    position: absolute; 
    content: ''; 
    display: block; 

    .for(@styles); .-each(@style) { 
     & when (@style = center) { 
      margin-left: auto; 
      margin-right: auto; 
      margin-top: auto; 
      margin-bottom: auto; 
      left: 0; 
      right: 0; 
      top: 0; 
      bottom: 0; 
     } 
     & when (@style = hcenter) { 
      margin-left: auto; 
      margin-right: auto; 
      left: 0; 
      right: 0; 
     } 
     & when (@style = vcenter) { 
      margin-top: auto; 
      margin-bottom: auto; 
      top: 0; 
      bottom: 0; 
     } 
     & when (@style = top) { 
      top: 0; 
     } 
     & when (@style = bottom) { 
      bottom: 0; 
     } 
     & when (@style = right) { 
      right: 0; 
     } 
     & when (@style = left) { 
      left: 0; 
     } 
    } 
} 

---

其實上面的代碼進行優化，以更緊湊：

.align(@styles...) { 
    position: absolute; 
    content: ''; 
    display: block; 

    .center(@pos) { 
     margin-@{pos}: auto; 
     @{pos}: 0; 
    } 

    .for(@styles); 
     .-each(center) {.-each(hcenter); .-each(vcenter)} 
     .-each(hcenter) {.center(left); .center(right)} 
     .-each(vcenter) {.center(top); .center(bottom)} 
     .-each(@style) when (default()) {@{style}: 0} 
} 

雖然通過這種方式，對於不太熟悉Less的人來說，看起來可能會更加困惑。

Answer 2

我不確定你的每個循環。例如(center, top;)將設置top: 0;兩次？ 但你可以嘗試：

.align(@styles){ 
.setproperties(@iterator:1) when (@iterator <= length(@styles)) { 

    @style: extract(@styles,@iterator); 

    & when (@style = center) { 
     margin-left: auto; 
     margin-right: auto; 
     margin-top: auto; 
     margin-bottom: auto; 
     left: 0; 
     right: 0; 
     top: 0; 
     bottom: 0; 
    } 
    & when (@style = hcenter) 
    { 
     margin-left: auto; 
     margin-right: auto; 
     left: 0; 
     right: 0; 
    } 
    // add more & when 's here 

    .setproperties((@iterator + 1)); 
} 
position: absolute; 
content: ''; 
display: block; 
.setproperties(); 
} 

以上可以被稱爲：

selector1 { 
    .align(center;); 
} 
selector2 { 
    .align(center hcenter;); 
}