Less學習筆記 -- Mixins（混合）二

進階參數和@reset變量

如果你希望你的mixin接受數量不定的參數，你可以使用“...”。在變量名後面使用它，它會将這些參數配置設定給變量

<code>.mixin(...){</code><code>/*接受0到N個參數*/</code><code>}</code>

<code>.mixin(){</code><code>/*不接受任何參數*/</code><code>}</code>

<code>.mixin(@a:</code><code>1</code><code>){</code><code>/*接受0到1個參數*/</code><code>}</code>

<code>.mixin(@a:</code><code>1</code><code>;...){</code><code>/*接受0到N個參數*/</code><code>}</code>

<code>.mixin(@a;...){</code><code>/*接受1到N個參數*/</code><code>}</code>

.mixin(...){ } 接受0到N個參數

Less：

<code>.mixin</code><code>1</code><code>(...){</code>

<code>  </code><code>padding</code><code>:@arguments;</code>

<code>}</code>

<code>div{</code>

<code>  </code><code>.mixin</code><code>1</code><code>(</code><code>10px</code><code>);</code>

<code>  </code><code>div{</code>

<code>    </code><code>.mixin</code><code>1</code><code>(</code><code>20px</code> <code>30px</code><code>);</code>

<code>    </code><code>div{</code>

<code>      </code><code>.mixin</code><code>1</code><code>(</code><code>40px</code> <code>50px</code> <code>60px</code><code>);</code>

<code>      </code><code>div{</code>

<code>        </code><code>.mixin</code><code>1</code><code>(</code><code>70px</code> <code>80px</code> <code>90px</code> <code>100px</code><code>)</code>

<code>      </code><code>}</code>

<code>    </code><code>}</code>

<code>  </code><code>}</code>

CSS：

<code>div {</code>

<code>  </code><code>padding</code><code>: </code><code>10px</code><code>;</code>

<code>div div {</code>

<code>  </code><code>padding</code><code>: </code><code>20px</code> <code>30px</code><code>;</code>

<code>div div div {</code>

<code>  </code><code>padding</code><code>: </code><code>40px</code> <code>50px</code> <code>60px</code><code>;</code>

<code>div div div div {</code>

<code>  </code><code>padding</code><code>: </code><code>70px</code> <code>80px</code> <code>90px</code> <code>100px</code><code>;</code>

.mixin(){ } 不接受任何參數 （這個其實就相當于不輸出混合集）

<code>.mixin</code><code>2</code><code>(){</code>

<code>  </code><code>width</code><code>:</code><code>200px</code><code>;</code>

<code>p{</code>

<code>  </code><code>.mixin</code><code>2</code><code>;</code>

<code>p {</code>

<code>  </code><code>width</code><code>: </code><code>200px</code><code>;</code>

.mixin(@a:1){ } 接受0到1個參數

<code>.mixin</code><code>3</code><code>(@red</code><code>1:</code><code>#e4393c</code><code>){</code>

<code>  </code><code>color</code><code>:@red</code><code>1</code><code>;</code>

<code>span{</code>

<code>  </code><code>.mixin</code><code>3</code><code>;</code>

<code>span {</code>

<code>  </code><code>color</code><code>: </code><code>#e4393c</code><code>;</code>

.mixin(@a:1;...){ } 接受0到N個參數

<code>.mixin</code><code>4</code><code>(@a:</code><code>10px</code><code>, ...){</code>

<code>  </code><code>.mixin</code><code>4</code><code>;</code>

<code>  </code><code>p{</code>

<code>    </code><code>.mixin</code><code>4</code><code>(</code><code>2px</code><code>,</code><code>5px</code><code>,</code><code>2px</code> <code>5px</code><code>);</code>

<code>div p {</code>

<code>  </code><code>padding</code><code>: </code><code>2px</code> <code>5px</code> <code>2px</code> <code>5px</code><code>;</code>

.mixin(@a;...){ } 接受1到N個參數

<code>.mixin</code><code>5</code><code>(@a, ...){</code>

<code>ul{</code>

<code>  </code><code>.mixin</code><code>5</code><code>(</code><code>5px</code><code>);</code>

<code>  </code><code>li{</code>

<code>    </code><code>.mixin</code><code>5</code><code>(</code><code>2px</code> <code>4px</code><code>);</code>

<code>ul {</code>

<code>  </code><code>padding</code><code>: </code><code>5px</code><code>;</code>

<code>ul li {</code>

<code>  </code><code>padding</code><code>: </code><code>2px</code> <code>4px</code><code>;</code>

本文轉自   frwupeng517   51CTO部落格，原文連結:http://blog.51cto.com/dapengtalk/1863332