使用中混入

Question

目前，我有我的少CSS片-webkit特定的屬性，我試圖用mixins更新它們添加-moz屬性，像這樣的參數未定義的數字：

.transition(@1) { 
    -webkit-transition: @1; 
    -moz-transition: @1; 
} 

div { 
    .transition(all .5s); 
} 

上面的示例工作正常不過我也有這樣的事情：

div { 
    -webkit-transition: border-color .3s, background .3s; 
} 

我不能叫mixin爲.transition(border-color .3s, background .3s)，因爲它具有比定義更多的參數10。所以我在做什麼，此刻是這樣的：

.transition(@1) { 
    -webkit-transition: @1; 
    -moz-transition: @1; 
} 
.transition-2(@1, @2) { 
    -webkit-transition: @1, @2; 
    -moz-transition: @1, @2; 
} 

div { 
    .transition-2(border-color .3s, background .3s); 
} 

這是煩人，我要在我的表，我以前用以前沒有用過的一些參數隨時添加冗餘代碼;我有這個問題，其他的CSS3屬性也一樣，例如box-shadow，當我需要在開始添加inset。

有什麼辦法來聲明mixins靈活的與少參數的數目，就像CSS3屬性？

Answer 1

你可以嘗試

.transition(@1) { 
    -webkit-transition: @1; 
    -moz-transition: @1; 
} 
.transition-2(@1, @2) { 
    .transition(@1); // this includes all the stuff from transition(@1) 
    color:red; // additional stuff 
} 

至於你的實際問題，我不相信，LESS本身有任何形式的「休息」類型的參數傳遞。

Answer 2

對於這種情況，可使用的下文提到的選項中的任何一個來避免冗餘混入代碼。

選項1：（最簡單的解決方案 - 拜七階段-MAX的highlighting the miss）

我們可以用分號作爲參數的分隔符/分隔符，當我們在添加一個分號指定需要被轉換（在逗號分隔格式）的所有屬性，整個部分之前，將被認爲是一個單一的參數之後結束。從official Less website

提取物：

使用逗號作爲混入分離器使得不可能創建逗號分隔的列表作爲參數。在另一方面，如果編譯器看到混入來電或聲明中的至少一個分號，它假定參數之間用分號分隔，並在編譯時所有逗號屬於CSS列表

.transition(@1) { 
    -webkit-transition: @1; 
    -moz-transition: @1; 
} 

div{ 
    .transition(border-color .5s, background .3s, color .3s;); 
} 

所以上面的代碼會結果在

div { 
    -webkit-transition: border-color 0.5s, background 0.3s, color 0.3s; 
    -moz-transition: border-color 0.5s, background 0.3s, color 0.3s; 
} 

---

選項2：

將引號中的輸入值傳遞給mixin（需要轉換多少個特定屬性）。內混入，使用~或e()內置功能來剝去引號。編譯

div { 
    -webkit-transition: border-color .5s, background .3s; 
    -moz-transition: border-color .5s, background .3s; 
} 
div#sample2 { 
    -webkit-transition: border-color .3s, background .3s, color .3s; 
    -moz-transition: border-color .3s, background .3s, color .3s; 
} 

當

.transition(@1) { 
    -webkit-transition: ~"@{1}"; 
    -moz-transition: ~"@{1}"; 
} 

div { 
    .transition("border-color .5s, background .3s"); 
} 
div#sample2 { 
    .transition("border-color .3s, background .3s, color .3s"); 
} 

將產生下面CSS

---

選項3：

少確實允許使用...混入其允許創建/接受可變數目的輸入選項。因此，您可以使用與原始代碼相同的混音，方法是將...添加到輸入變量中，然後按照您原先的想法調用它。

.transition(@args...) { 
    -webkit-transition: @args; 
    -moz-transition: @args; 
} 

div { 
    .transition(border-color .5s, background .3s); 
} 

以上將成功編譯，但唯一的問題是，在編譯時它會產生下面的輸出。正如你所看到的，問題在於參數值是空格分隔的，而不是逗號分隔的（因爲它們應該是CSS能夠正常工作的）。

div { 
    -webkit-transition: border-color 0.5s background 0.3s; 
    -moz-transition: border-color 0.5s background 0.3s; 
} 

Ofcourse我們可以寫使用正則表達式複雜replace功能，但是這將真正使代碼混亂。相反，我們可以使用循環和一些內置函數來實現所需的輸出（如下所示）。

.transition(@args...) { 
    .loop-args(@argCount) when (@argCount > 0) { 
     .loop-args(@argCount - 1); 
     @arg: extract(@args, @argCount); 
     -webkit-transition+: @arg; 
     -moz-transition+: @arg; 
    } 
    .loop-args(length(@args)); 
} 

div { 
    .transition(border-color .5s, background .3s, color .3s); 
} 

基本上我們正在做的是使用...接受多個參數作爲輸入的mixin，然後遍歷各參數，並把它添加到CSS屬性的值。 +:（在Less v1.5.0中引入的合併函數）用於生成逗號分隔輸出。

在編譯時，它會產生下面的輸出：

div { 
    -webkit-transition: border-color 0.5s, background 0.3s, color 0.3s; 
    -moz-transition: border-color 0.5s, background 0.3s, color 0.3s; 
}