Less学习笔记 -- Mixins（混合）一

混合：

混合可以将一个定义好的classA轻松的引入到另一个classB中，从而简单实现classB继承classA中的所有属性。任何CSS中的class或者id都可以引入

Less：

<code>.aWidth{</code><code>width</code><code>:</code><code>400px</code><code>;}</code>

<code>#aHeight{</code><code>height</code><code>:</code><code>600px</code><code>;}</code>

<code>p{</code>

<code>  </code><code>.aWidth;</code>

<code>  </code><code>#aHeight;</code>

<code>}</code>

CSS：

<code>.aWidth {</code>

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

<code>#aHeight {</code>

<code>  </code><code>height</code><code>: </code><code>600px</code><code>;</code>

<code>p {</code>

带选择器的混合集：

混合集不仅可以包含各种属性，而且可以包含各种选择器

<code>.my-hover-mixin(){//加个空括号，不执行这段代码的编译</code>

<code>  </code><code>&amp;:hover{</code>

<code>    </code><code>border</code><code>:</code><code>1px</code> <code>solid</code> <code>#ddd</code><code>;</code>

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

<code>button{</code>

<code>  </code><code>.my-hover-mixin;</code>

<code>button:hover {</code>

<code>  </code><code>border</code><code>: </code><code>1px</code> <code>solid</code> <code>#ddd</code><code>;</code>

不输出混合集：

如果你想创建一个混合集，但是却不想让它输出到你的样式中，你可以在混合集的名字后面加一个括号。这句话怎么理解呢？对比以下两段代码：

代码一：

<code>.my-mixin{</code>

<code>  </code><code>color</code><code>:</code><code>black</code><code>;</code>

<code>/*看这里*/</code>

<code>.my-other-mixin{</code>

<code>  </code><code>background</code><code>:</code><code>white</code><code>;</code>

<code>.class{</code>

<code>  </code><code>.my-mixin;</code>

<code>  </code><code>/*看这里*/</code>

<code>  </code><code>.my-other-mixin;</code>

<code>.my-mixin {</code>

<code>  </code><code>color</code><code>: </code><code>black</code><code>;</code>

<code>.my-other-mixin {</code>

<code>  </code><code>background</code><code>: </code><code>white</code><code>;</code>

<code>.class {</code>

代码二：

<code>.my-other-mixin(){</code>

CSS：带空括号的混合集并没有编译过来，但是可以编译到另一个引用它的选择器里面

我们还可以带参数的调用，就像使用函数一样

<code>.filter(@blur){</code>

<code>  </code><code>-webkit-filter:blur(@blur);</code>

<code>  </code><code>-moz-filter:blur(@blur);</code>

<code>  </code><code>-ms-filter:blur(@blur);</code>

<code>  </code><code>filter:blur(@blur);</code>

<code>.border-radius(@radius:</code><code>5px</code><code>){</code>

<code>  </code><code>-webkit-border-radius: @radius;</code>

<code>  </code><code>-moz-border-radius: @radius;</code>

<code>  </code><code>border-radius: @radius;</code>

<code>#section{</code>

<code>  </code><code>.border-radius;</code>

<code>  </code><code>/*如果写公共样式的时候没有设定具体的数值，引用的时候就必须设定，否则出不来效果*/</code>

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

<code>#footer{.border-radius(</code><code>10px</code><code>);}</code>

<code>#section {</code>

<code>  </code><code>-webkit-border-radius: </code><code>5px</code><code>;</code>

<code>  </code><code>-moz-border-radius: </code><code>5px</code><code>;</code>

<code>  </code><code>border-radius: </code><code>5px</code><code>;</code>

<code>  </code><code>-webkit-filter: blur(</code><code>5px</code><code>);</code>

<code>  </code><code>-moz-filter: blur(</code><code>5px</code><code>);</code>

<code>  </code><code>-ms-filter: blur(</code><code>5px</code><code>);</code>

<code>  </code><code>filter: blur(</code><code>5px</code><code>);</code>

<code>#footer {</code>

<code>  </code><code>-webkit-border-radius: </code><code>10px</code><code>;</code>

<code>  </code><code>-moz-border-radius: </code><code>10px</code><code>;</code>

<code>  </code><code>border-radius: </code><code>10px</code><code>;</code>

带多个参数的混合

参数可以用逗号或分号分隔，但是推荐用分号分隔。

定义多个具有相同名称和参数数量的mixins是合法的，less会使用它可以使用的属性。如果使用mixin的时候只带一个参数，比如.mixin(red)，这个属性会导致所有的mixin都会强制使用这个明确的参数：

<code>.mixin(@color) {</code>

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

<code>.mixin(@color; @</code><code>padding</code><code>: </code><code>2px</code><code>) {</code>

<code>  </code><code>color</code><code>-2:</code> <code>@color;</code>

<code>  </code><code>padding</code><code>-2:</code> <code>@padding;</code>

<code>.mixin(@color; @padding; @</code><code>margin</code><code>: </code><code>5px</code><code>) {</code>

<code>  </code><code>color</code><code>-3:</code> <code>@color;</code>

<code>  </code><code>padding</code><code>-3:</code> <code>@padding;</code>

<code>  </code><code>margin</code><code>: @margin @margin @margin @margin;</code>

<code>h</code><code>1</code><code>{</code>

<code>  </code><code>.mixin(</code><code>red</code><code>);</code>

<code>div{</code>

<code>  </code><code>.mixin(</code><code>green</code><code>;</code><code>4px</code><code>);</code>

<code>span{</code>

<code>  </code><code>.mixin(</code><code>blue</code><code>; </code><code>6px</code><code>; </code><code>8px</code><code>);</code>

<code>h</code><code>1</code> <code>{</code>

<code>  </code><code>color</code><code>-1:</code> <code>#ff0000</code><code>;</code>

<code>  </code><code>color</code><code>-2:</code> <code>#ff0000</code><code>;</code>

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

<code>div {</code>

<code>  </code><code>color</code><code>-2:</code> <code>#008000</code><code>;</code>

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

<code>  </code><code>color</code><code>-3:</code> <code>#008000</code><code>;</code>

<code>  </code><code>padding</code><code>-3:</code> <code>4px</code><code>;</code>

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

<code>span {</code>

<code>  </code><code>color</code><code>-3:</code> <code>#0000ff</code><code>;</code>

<code>  </code><code>padding</code><code>-3:</code> <code>6px</code><code>;</code>

<code>  </code><code>margin</code><code>: </code><code>8px</code> <code>8px</code> <code>8px</code> <code>8px</code><code>;</code>

命名参数

引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值，任何参数都通过它的名称来引用，而不是特定的顺序

<code>.mixin(@</code><code>color</code><code>:</code><code>blue</code><code>; @</code><code>padding</code><code>:</code><code>10px</code><code>; @</code><code>margin</code><code>:</code><code>15px</code><code>;){</code>

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

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

<code>  </code><code>margin</code><code>:@margin;</code>

<code>.class</code><code>1</code><code>{</code>

<code>  </code><code>.mixin(@</code><code>margin</code><code>:</code><code>20px</code><code>; @</code><code>color</code><code>:</code><code>#e4393c</code><code>;)</code>

<code>.class</code><code>2</code><code>{</code>

<code>  </code><code>.mixin(</code><code>#bf6da5</code><code>; </code><code>60px</code><code>;)</code>

<code>.class</code><code>1</code> <code>{</code>

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

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

<code>  </code><code>margin</code><code>: </code><code>20px</code><code>;</code>

<code>.class</code><code>2</code> <code>{</code>

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

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

<code>  </code><code>margin</code><code>: </code><code>15px</code><code>;</code>

@arguments变量

arguments在Javascript中代表所有的参数，在这里也是同样的意思，只不过用法稍有区别。如果你不想单个单个的处理参数，这一特性是很有用的：

<code>.box-shadow(@x:</code><code>0</code><code>; @y:</code><code>0</code><code>; @blur:</code><code>1px</code><code>; @</code><code>color</code><code>:</code><code>#000</code><code>;){</code>

<code>  </code><code>-webkit-box-shadow: @arguments;</code>

<code>  </code><code>-moz-box-shadow: @arguments;</code>

<code>  </code><code>box-shadow: @arguments;</code>

<code>.big-</code><code>block</code><code>{</code>

<code>  </code><code>.box-shadow(</code><code>2px</code><code>; </code><code>5px</code><code>;)</code>

<code>.big-</code><code>block</code> <code>{</code>

<code>  </code><code>-webkit-box-shadow: </code><code>2px</code> <code>5px</code> <code>1px</code> <code>#000000</code><code>;</code>

<code>  </code><code>-moz-box-shadow: </code><code>2px</code> <code>5px</code> <code>1px</code> <code>#000000</code><code>;</code>

<code>  </code><code>box-shadow: </code><code>2px</code> <code>5px</code> <code>1px</code> <code>#000000</code><code>;</code>

!important关键字

在调用的混合集后面追加!important关键字，可以使混合集里面所有的属性都继承!important

<code>.foo(@bg:</code><code>#f00</code><code>, @</code><code>color</code><code>:</code><code>#666</code><code>){</code>

<code>  </code><code>background</code><code>:@bg;</code>

<code>.unimportant{</code>

<code>  </code><code>.foo;</code>

<code>.important{</code>

<code>  </code><code>.foo </code><code>!important</code><code>;</code>

<code>.unimportant {</code>

<code>  </code><code>background</code><code>: </code><code>#ff0000</code><code>;</code>

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

<code>.important {</code>

<code>  </code><code>background</code><code>: </code><code>#ff0000</code> <code>!important</code><code>;</code>

<code>  </code><code>color</code><code>: </code><code>#666666</code> <code>!important</code><code>;</code>

在这里，也可以体验一把Less在实际开发中关于提高代码维护，给我们带来的魅力

示例一

<code>@pink:</code><code>#f0f</code><code>;</code>

<code>#header{</code>

<code>  </code><code>h</code><code>2</code><code>{</code>

<code>    </code><code>font-size</code><code>:</code><code>26px</code><code>;</code>

<code>    </code><code>font-weight</code><code>:</code><code>bold</code><code>;</code>

<code>  </code><code>.sub_title{</code>

<code>    </code><code>color</code><code>:@pink;</code>

<code>  </code><code>.study_list{</code>

<code>    </code><code>color</code><code>:@pink+</code><code>111</code><code>;</code>

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

<code>    </code><code>font-size</code><code>:</code><code>12px</code><code>;</code>

<code>    </code><code>a{</code>

<code>      </code><code>text-decoration</code><code>: </code><code>none</code><code>;</code>

<code>      </code><code>&amp;:hover{</code>

<code>        </code><code>border-width</code><code>:</code><code>1px</code><code>;</code>

<code>        </code><code>color</code><code>:@pink+</code><code>666</code><code>;</code>

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

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

<code>#header h</code><code>2</code> <code>{</code>

<code>  </code><code>font-size</code><code>: </code><code>26px</code><code>;</code>

<code>  </code><code>font-weight</code><code>: </code><code>bold</code><code>;</code>

<code>#header .sub_title {</code>

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

<code>#header .study_list {</code>

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

<code>#header p {</code>

<code>  </code><code>font-size</code><code>: </code><code>12px</code><code>;</code>

<code>#header p a {</code>

<code>  </code><code>text-decoration</code><code>: </code><code>none</code><code>;</code>

<code>#header p a:hover {</code>

<code>  </code><code>border-width</code><code>: </code><code>1px</code><code>;</code>

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

示例二

<code>@url:</code><code>"../images"</code><code>;</code>

<code>#loginForm{</code>

<code>  </code><code>width</code><code>:</code><code>80%</code><code>;</code>

<code>  </code><code>margin</code><code>:</code><code>0</code> <code>auto</code><code>;</code>

<code>  </code><code>ul{</code>

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

<code>      </code><code>margin</code><code>:</code><code>15px</code> <code>0</code><code>;</code>

<code>      </code><code>&amp;:nth-child(</code><code>2</code><code>){</code>

<code>        </code><code>position</code><code>:</code><code>relative</code><code>;</code>

<code>      </code><code>label{</code>

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

<code>        </code><code>font-family</code><code>:</code><code>'Microsoft Yahei'</code><code>;</code>

<code>        </code><code>font-weight</code><code>:</code><code>bold</code><code>;</code>

<code>        </code><code>font-size</code><code>:</code><code>1.1em</code><code>;</code>

<code>  </code><code>.imgBground{</code>

<code>    </code><code>width</code><code>:</code><code>100%</code><code>;</code>

<code>    </code><code>height</code><code>:</code><code>28</code><code>vh;</code>

<code>    </code><code>filter:</code><code>url</code><code>(blur.svg#blur);</code>

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

<code>    </code><code>.border-radius(</code><code>10px</code><code>);</code>

<code>    </code><code>background</code><code>:</code><code>url</code><code>(</code><code>'@{url}/1.jpg'</code><code>);</code>

CSS:

<code>#loginForm {</code>

<code>  </code><code>width</code><code>: </code><code>80%</code><code>;</code>

<code>  </code><code>margin</code><code>: </code><code>0</code> <code>auto</code><code>;</code>

<code>#loginForm ul li {</code>

<code>  </code><code>margin</code><code>: </code><code>15px</code> <code>0</code><code>;</code>

<code>#loginForm ul li:nth-child(</code><code>2</code><code>) {</code>

<code>  </code><code>position</code><code>: </code><code>relative</code><code>;</code>

<code>#loginForm ul li label {</code>

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

<code>  </code><code>font-family</code><code>: </code><code>'Microsoft Yahei'</code><code>;</code>

<code>  </code><code>font-size</code><code>: </code><code>1.1em</code><code>;</code>

<code>#loginForm .imgBground {</code>

<code>  </code><code>width</code><code>: </code><code>100%</code><code>;</code>

<code>  </code><code>height</code><code>: </code><code>28</code><code>vh;</code>

<code>  </code><code>filter: </code><code>url</code><code>(blur.svg#blur);</code>

<code>  </code><code>background</code><code>: </code><code>url</code><code>(</code><code>'../images/1.jpg'</code><code>);</code>

详情参考官方文档：

<a href="http://www.css88.com/doc/less/features/#mixins-feature" target="_blank">http://www.css88.com/doc/less/features/#mixins-feature</a>

本文转自   frwupeng517   51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1862989