減少使用不同變量類型重載mixins

我正在學習如何使用LESS。我對C++有很好的理解。我想爲漸變創建一些Mixins。我開始爲它編寫mixins，以便我可以輸入.gradient（「起始端即頂端」，第一種顏色，第二種顏色）或.gradient（「起始端即頂端」，第一種顏色，第一種停止，第二種顏色，第二站），但對於有2,3或4站的梯度。在我開始用四種顏色寫下一個之前，我想問一下，不同的變量類型是否可以重載LESS mixins。例如：減少使用不同變量類型重載mixins

.gradient (top, @top_color, @top_stop, @bottom_color, @bottom_stop){ 
    background: @top_color; 
    background: -moz-linear-gradient(top, @top_color @top_stop, @bottom_color @bottom_stop); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@top_stop,@top_color), color-stop(@bottom_stop,@bottom_color)); 
    background: -webkit-linear-gradient(top, @top_color @top_stop,@bottom_color @bottom_stop); 
    background: -o-linear-gradient(top, @top_color @top_stop,@bottom_color @bottom_stop); 
    background: -ms-linear-gradient(top, @top_color @top_stop,@bottom_color @bottom_stop); 
    background: linear-gradient(to bottom, @top_color @top_stop,@bottom_color @bottom_stop); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top_color', endColorstr='@bottom_color',GradientType=0); 
} 
.gradient(@_,@top_color,@top_stop,@bottom_color,@bottom_stop){}

上面的mixin需要5個參數，但下面的參數也是如此。

.gradient (top, @top_color, @middle_top_color, @middle_bottom_color, @bottom_color){ 
    background: @top_color; 
    background: -moz-linear-gradient(top, @top_color 0%, @middle_top_color 25%, @middle_bottom_color 75%, @bottom_color 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@top_color), color-stop(25%,@middle_top_color), color-stop(75%,@middle_bottom_color), color-stop(100%,@bottom_color)); 
    background: -webkit-linear-gradient(top, @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    background: -o-linear-gradient(top, @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    background: -ms-linear-gradient(top, @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    background: linear-gradient(to bottom, @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top_color', endColorstr='@bottom_color',GradientType=0); 
}

（頂混入的參數是顏色，百分比，顏色％，而底部的mixin的參數是顏色，顏色，顏色，顏色）

將LESS已瞭解這兩個因爲變量之間的差異不同？或者我應該找到一個不同的路線來做到這一點？

編輯：

這是一個很好的解決方案，或是否有更好的辦法？

.gradient (top, true, @top_color, @top_stop, @bottom_color, @bottom_stop){ 
    background: @top_color; 
    background: -moz-linear-gradient(top, @top_color @top_stop, @bottom_color @bottom_stop); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@top_stop,@top_color), color-stop(@bottom_stop,@bottom_color)); 
    background: -webkit-linear-gradient(top, @top_color @top_stop,@bottom_color @bottom_stop); 
    background: -o-linear-gradient(top, @top_color @top_stop,@bottom_color @bottom_stop); 
    background: -ms-linear-gradient(top, @top_color @top_stop,@bottom_color @bottom_stop); 
    background: linear-gradient(to bottom, @top_color @top_stop,@bottom_color @bottom_stop); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top_color', endColorstr='@bottom_color',GradientType=0); 
} 
.gradient(@_,true,@top_color,@top_stop,@bottom_color,@bottom_stop){} 

.gradient (top, false, @top_color, @middle_top_color, @middle_bottom_color, @bottom_color){ 
    background: @top_color; 
    background: -moz-linear-gradient(top, @top_color 0%, @middle_top_color 25%, @middle_bottom_color 75%, @bottom_color 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@top_color), color-stop(25%,@middle_top_color), color-stop(75%,@middle_bottom_color), color-stop(100%,@bottom_color)); 
    background: -webkit-linear-gradient(top, @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    background: -o-linear-gradient(top, @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    background: -ms-linear-gradient(top, @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    background: linear-gradient(to bottom, @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top_color', endColorstr='@bottom_color',GradientType=0); 
} 
.gradient(@_,false,@top_color,@middle_top_color,@middle_bottom_color,@bottom_color){}

第二個參數如果有停止則爲真，如果不是則返回false？

來源

2015-05-01 kingcobra1986

您是否嘗試過運行您的代碼以查看LESS是否忽略了您的更改？ –

是的，當我做.gradient（頂部，藍色，25％，紅色，75％），正常工作，但當我做.gradient（頂部，藍色，紅色，綠色，藍色），無法正常工作。有沒有一種方法可以根據變量類型進行操作？ – kingcobra1986

由於變量大於或等於不同，會減少兩者之間的差異嗎？或者我應該找到一個不同的路線來做到這一點？

不，根據參數的數量減少參數匹配，但不檢查變量的類型。但少了可以檢查一個參數的值，參見http://lesscss.org/features/#mixins-parametric-feature-pattern-matching

另外，你也可以使用防護：http://lesscss.org/features/#mixin-guards-feature與類型的函數：http://lesscss.org/functions/#type-functions。

.gradient (top, @top_color, @top_stop, @bottom_color, @bottom_stop) when (ispercentage(@top_stop)) {}

使用第一混入保護，即使如上述，也是第二混入仍然匹配和更少的編譯所有匹配混入小心，所以你也必須設置一個守衛你的第二個的mixin：

.gradient (top, @top_color, @middle_top_color, @middle_bottom_color, @bottom_color) when (iscolor(@middle_top_color)){ }

來源

2015-05-01 20:43:58

我正在使用方向.gradient匹配的參數（@_，@color，@color）。我應該爲這樣的站點創建另一個.gradient（@ _，@ _，color，stop，color，stop）。使第二個開關只是說這樣的「停止」：.gradient（頂部，停止，@顏色，@停止，@顏色，@停止）是否會干擾.gradient（@ _，@ color，@ color，@ color， @顏色，@顏色）如果我去了5種顏色？ – kingcobra1986

沒有不行。試試'echo「.m（top）{p：top;}。m（@v）{p2：@v;} test {。米（頂部）; }「| lessc -'這就是輸出'測試{ p：top; p2：top; }'這意味着這兩個mixins都與您的調用相匹配 –

我可以像下面這樣將它應用於base mixin：.gradient（）（（在符號處）start_stop）{}而不是將其應用於所有其他符號時，（））_，（at符號）顏色，（at符號）stop，（at符號）end_color，（at符號）end_stop） – kingcobra1986

這是我用走的方向：

.gradient (top, @top_color, @top_stop, @bottom_color, @bottom_stop) when (ispercentage(@top_stop)){ 
    background: @top_color; 
    background: -moz-linear-gradient(top, @top_color @top_stop, @bottom_color @bottom_stop); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@top_stop,@top_color), color-stop(@bottom_stop,@bottom_color)); 
    background: -webkit-linear-gradient(top, @top_color @top_stop,@bottom_color @bottom_stop); 
    background: -o-linear-gradient(top, @top_color @top_stop,@bottom_color @bottom_stop); 
    background: -ms-linear-gradient(top, @top_color @top_stop,@bottom_color @bottom_stop); 
    background: linear-gradient(to bottom, @top_color @top_stop,@bottom_color @bottom_stop); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top_color', endColorstr='@bottom_color',GradientType=0); 
} 

.gradient (top, @top_color, @middle_top_color, @middle_bottom_color, @bottom_color) when (iscolor(@middle_top_color)){ 
    background: @top_color; 
    background: -moz-linear-gradient(top, @top_color 0%, @middle_top_color 25%, @middle_bottom_color 75%, @bottom_color 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@top_color), color-stop(25%,@middle_top_color), color-stop(75%,@middle_bottom_color), color-stop(100%,@bottom_color)); 
    background: -webkit-linear-gradient(top, @top_color 0%,@middle_top_color 25%,@middle_bottom_color 75%,@bottom_color 100%); 
    background: -o-linear-gradient(top, @top_color 0%,@middle_top_color 25%, @middle_bottom_color 75%,@bottom_color 100%); 
    background: -ms-linear-gradient(top, @top_color 0%,@middle_top_color 25%, @middle_bottom_color 75%,@bottom_color 100%); 
    background: linear-gradient(to bottom, @top_color 0%, @middle_top_color 25%, @middle_bottom_color 75%,@bottom_color 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top_color', endColorstr='@bottom_color',GradientType=0); 
} 
.gradient (@_, @var1, @var2, @var3, @var4) {}

它似乎正確地爲我工作。感謝@Bass

來源

2015-05-01 22:57:52 kingcobra1986

減少使用不同變量類型重載mixins

回答

相關問題