在mixin參數中使用較少

Question

我希望為border-radius創建LESS mixin，允許兩個參數在mixin聲明中被另外兩個參數設置為默認值。 以下是一個示例，它不起作用，但類似於我想要實現的目標：

.border-radius-ext (@topleft: 0, @topright: 0, @bottomright: @topleft, @bottomleft: @topright) {
    border-top-left-radius: @topleft;
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
}

我意識到我可以將所有值設置為0開始。 那不是我追求的。 我希望如果mixin這樣使用：

blockquote {
    .border-radius-ext(3px, 5px);
}

mixin將輸出：

blockquote {
    border-top-left-radius: 3px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 5px;
}

...如果使用mixin，仍然允許覆蓋@bottomright和@bottomleft的默認值：

blockquote {
    .border-radius-ext(3px, 5px, 7px, 2px);
}

在那種情況下，輸出將是：

blockquote {
    border-top-left-radius: 3px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 2px;
}

這是不可能的LESS或我只是做錯了嗎？

Answer 1

參數的默認值不能是其他參數。 但是你可以使用這種方法：

.border-radius-ext (@topleft, @topright) {
    .border-radius-ext(@topleft, @topright, @topleft, @topright);
}

.border-radius-ext (@topleft, @topright, @bottomright, @bottomleft) {
    border-top-left-radius: @topleft;
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
}

現在，您可以將此mixin與兩個或四個參數一起使用。 如果需要，您還可以輕松創建包含三個參數的版本。

Answer 2

因為你的mixin需要4個變量 - 你需要輸入4個變量。 設置默認值只有在你擁有所有變量的默認值並且沒有傳遞任何東西時才會起作用 - 或者（我認為） - 如果你總是將變量放在開頭，而默認值放在最后。

在任何情況下，我建議只使用四個變量，可能使用默認值，因為如果另一個開發人員在你的LESS上工作，那就不那么容易混淆了。

這樣的事情會很好：

.border-radius-ext (@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) {
    border-top-left-radius: @topleft;
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
}

.border-radius-ext(3px, 5px, 7px, 2px);

我還建議使用LESS元素， http：//lesselements.com/ ，這是一個很好的預制mixin系列。