簡化LESS混入

Question

我有基於傳遞給它的側面使邊緣有些不足（上，右，下，左或全部）：

.margin(@px,@side) when (@side = top) { 
    (){ margin-top: ~"@{px}px"; } 
    } 
    .margin(@px,@side) when (@side = right) { 
    (){ margin-right: ~"@{px}px"; } 
    } 
    .margin(@px,@side) when (@side = bottom) { 
    (){ margin-bottom: ~"@{px}px"; } 
    } 
    .margin(@px,@side) when (@side = left) { 
    (){ margin-left: ~"@{px}px"; } 
    } 
    .margin(@px,@side) when (@side = all) { 
    (){ margin-top: ~"@{px}px"; 
     margin-right: ~"@{px}px"; 
     margin-bottom: ~"@{px}px"; 
     margin-left: ~"@{px}px"; } 
    } 

我的問題是，如果我有一個這樣的ID：

#testfeature { 
.margin(10px,l); 
.margin(10px,r); 
} 

再少編譯這樣的：

#testfeature { 
margin-left:10px; 
} 

#testfeature { 
margin-right:10px; 
} 

我如何得到它來編譯如下：

#testfeature { 
margin-left:10px; 
margin-right:10px; 
} 

Answer 1

擺脫不必要的() { ... }的包裝所有混合風格。他們導致選擇被奇怪的解釋，並把它們分開到不同的選擇，而不是下一個選擇加盟的一切：

.margin(@px,@side) when (@side = top) { 
    margin-top: ~"@{px}px"; 
} 
.margin(@px,@side) when (@side = right) { 
    margin-right: ~"@{px}px"; 
} 
.margin(@px,@side) when (@side = bottom) { 
    margin-bottom: ~"@{px}px"; 
} 
.margin(@px,@side) when (@side = left) { 
    margin-left: ~"@{px}px"; 
} 
.margin(@px,@side) when (@side = all) { 
    margin-top: ~"@{px}px"; 
    margin-right: ~"@{px}px"; 
    margin-bottom: ~"@{px}px"; 
    margin-left: ~"@{px}px"; 
} 

你也許也下降了~"@{px}px"贊成簡單地@px，也是最後混入應可能是：

.margin(@px, @side) when (@side = all) { 
    margin: @px; 
} 

Answer 2

要讓他們「組」，你需要創建一個嵌套和分組混合。下面是一個分組混合功能，「精簡」爲邊距設置。

1. 它需要從1到8個參數的任何地方;總是成對position然後value（除了下面指出的;它可以接受任何位置的順序和值auto或inherit允許）。
2. 傳遞一個「職位」只是在該職位上設置了一個0px保證金。
3. 將非單位數字默認爲px，但保留明確設置的單位。
4. 傳遞一個參數number值會將所有邊距均等地設置爲該數值。

LESS密新

.setMargins(@s1: ~'', @v1: 0, @s2: ~'', @v2: 0, @s3: ~'', @v3: 0, @s4: ~'', @v4: 0) { 

    .setPos(top, @T) { 
     .setNum() when (isnumber(@T)) { 
      margin-top: @T * 1px; 
     } 
     .setNum() when not (isnumber(@T)){ 
      margin-top: @T; 
     } 
     .setNum(); 
    } 
    .setPos(right, @R) { 
     .setNum() when (isnumber(@R)) { 
      margin-right: @R * 1px; 
     } 
     .setNum() when not (isnumber(@R)) { 
      margin-right: @R; 
     } 
     .setNum(); 
    } 
    .setPos(bottom, @B) { 
     .setNum() when (isnumber(@B)) { 
      margin-bottom: @B * 1px; 
     } 
     .setNum() when not(isnumber(@B)) { 
      margin-bottom: @B; 
     } 
     .setNum(); 
    } 
    .setPos(left, @L) { 
     .setNum() when (isnumber(@L)) { 
      margin-left: @L * 1px; 
     } 
     .setNum() when not (isnumber(@L)) { 
      margin-left: @L; 
     } 
     .setNum(); 
    } 
    //allows all to be called with one number or value 
    .setPos(@A, 0) when (isnumber(@A)) { 
      margin: @A * 1px; 
    } 
    .setPos(auto, 0) { 
      margin: auto; 
    } 
    .setPos(inherit, 0) { 
      margin: inherit; 
    } 
    //default null if no valid side given 
    .setPos(@other, 0) {} 
    //call all possible positions 
    .setPos(@s1, @v1); 
    .setPos(@s2, @v2); 
    .setPos(@s3, @v3); 
    .setPos(@s4, @v4); 
} 

實例

1. .setMargins(right);產生margin-right: 0px;
2. .setMargins(right, 15);產生margin-right: 15px;
3. .setMargins(left, 10em);產生margin-left: 10em;
4. .setMargins(top, 12, right, 10);生產：margin-top: 12px; margin-right: 10px;
5. .setMargins(25);生產：margin: 25px;
6. .setMargins(auto);生產：margin: auto;

所以你在選擇使用它：

LESS

#testfeature { 
    .setMargins(left, 10, right, 10); 
} 

CSS輸出

#testfeature { 
    margin-left: 10px; 
    margin-right: 10px; 
}