mixin參數中的LESS變量用法

我一直希望爲邊界半徑創建LESS mixin，允許通過mixin聲明中的兩個其他參數將兩個參數設置爲默認值。下面是一個例子，這是不行的，但類似我想要實現：mixin參數中的LESS變量用法

.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，所有值開始。那不是我所追求的。我希望，如果混入使用像這樣：

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

的混入將輸出：

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

...同時仍然允許@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或我只是做錯了嗎？

來源

2012-09-22 bridgestew

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

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

現在你可以使用這個混合或兩個或四個參數。如果需要，還可以使用三個參數輕鬆創建一個版本。

來源

2012-09-22 07:07:26

感謝您的信息，克里斯多弗！ – bridgestew

因爲你的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);

我還建議使用更少的元件，http://lesselements.com/，預建混入的大集合。

來源

2012-09-22 06:01:33 Stone

mixin參數中的LESS變量用法

回答

相關問題