較少css mixin參數A默認爲參數B

Question

我目前正在使用LESS CSS，並試圖創建一個mixin，模仿默認的速記參數的css行爲。

在CSS你經常聲明即

margin: 5px 5px 10px; 

而且它讀作

margin: 5px 5px 10px 5px; 

我試着用邊界半徑混入

.border-radius (@topright: 5px, @bottomright: @topright, @bottomleft: @topright, @topleft: @bottomright) {} 

我希望它採取同樣的如果僅用一個參數調用，則第一個作爲所有缺省值。如果我用2參數調用它，它應該將第一個默認值設爲第三個，將第二個默認值設爲第四個。

有沒有一種方法可以單獨使用LESS來實現這種行爲？

Answer 1

正確的方式做，這是隻接收一個參數

.border-radius(@px) { 
    -webkit-border-radius: @px; 
    -moz-border-radius: @px; 
    border-radius: @px; 
} 

然後，你可以用一個參數調用它：

.border-radius(5px); 

或許多。這需要你要麼把它們放到一個變量，或逃避他們：

@myradius: 5px 5px 10px; 
.border-radius(@myradius); 

或

.border-radius(~"5px 5px 10px"); 

我read的Bootstrap project使用爲簡潔的後一個版本。