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