混合：

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

Less：

.aWidth{width:400px;}#aHeight{height:600px;}p{.aWidth;#aHeight;}

CSS：

.aWidth{width:400px;}#aHeight{height:600px;}p{width:400px;height:600px;}

带选择器的混合集：

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

Less：

.my-hover-mixin(){//加个空括号，不执行这段代码的编译&:hover{border:1pxsolid#ddd;}}button{.my-hover-mixin;}

CSS：

button:hover{border:1pxsolid#ddd;}

不输出混合集：

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

代码一：

Less：

.my-mixin{color:black;}/*看这里*/.my-other-mixin{background:white;}.class{.my-mixin;/*看这里*/.my-other-mixin;}

CSS：

.my-mixin{color:black;}/*看这里*/.my-other-mixin{background:white;}.class{color:black;/*看这里*/background:white;}

代码二：

Less：

.my-mixin{color:black;}/*看这里*/.my-other-mixin(){background:white;}.class{.my-mixin;/*看这里*/.my-other-mixin;}

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

.my-mixin{color:black;}/*看这里*/.class{color:black;/*看这里*/background:white;}

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

Less：

.filter(@blur){-webkit-filter:blur(@blur);-moz-filter:blur(@blur);-ms-filter:blur(@blur);filter:blur(@blur);}.border-radius(@radius:5px){-webkit-border-radius:@radius;-moz-border-radius:@radius;border-radius:@radius;}#section{.border-radius;/*如果写公共样式的时候没有设定具体的数值，引用的时候就必须设定，否则出不来效果*/.filter(5px);}#footer{.border-radius(10px);}

CSS：

#section{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;/*如果写公共样式的时候没有设定具体的数值，引用的时候就必须设定，否则出不来效果*/-webkit-filter:blur(5px);-moz-filter:blur(5px);-ms-filter:blur(5px);filter:blur(5px);}#footer{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}

带多个参数的混合

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

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

Less：

.mixin(@color){color-1:@color;}.mixin(@color;@padding:2px){color-2:@color;padding-2:@padding;}.mixin(@color;@padding;@margin:5px){color-3:@color;padding-3:@padding;margin:@margin@margin@margin@margin;}h2{.mixin(red);}div{.mixin(green;4px);}span{.mixin(blue;6px;8px);}

CSS：

h2{color-1:#ff0000;color-2:#ff0000;padding-2:2px;}div{color-2:#008000;padding-2:4px;color-3:#008000;padding-3:4px;margin:5px5px5px5px;}span{color-3:#0000ff;padding-3:6px;margin:8px8px8px8px;}

命名参数

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

Less：

.mixin(@color:blue;@padding:10px;@margin:15px;){color:@color;padding:@padding;margin:@margin;}.class1{.mixin(@margin:20px;@color:#e4393c;)}.class2{.mixin(#bf6da5;60px;)}

CSS：

.class1{color:#e4393c;padding:10px;margin:20px;}.class2{color:#bf6da5;padding:60px;margin:15px;}

@arguments变量

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

Less：

.box-shadow(@x:0;@y:0;@blur:1px;@color:#000;){-webkit-box-shadow:@arguments;-moz-box-shadow:@arguments;box-shadow:@arguments;}.big-block{.box-shadow(2px;5px;)}

CSS：

.big-block{-webkit-box-shadow:2px5px1px#000000;-moz-box-shadow:2px5px1px#000000;box-shadow:2px5px1px#000000;}

!important关键字

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

Less：

.foo(@bg:#f00,@color:#666){background:@bg;color:@color;}.unimportant{.foo;}.important{.foo!important;}

CSS：

.unimportant{background:#ff0000;color:#666666;}.important{background:#ff0000!important;color:#666666!important;}

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

示例一

Less：

@pink:#f0f;#header{h3{font-size:26px;font-weight:bold;}.sub_title{color:@pink;}.study_list{color:@pink+111;}p{font-size:12px;a{text-decoration:none;&:hover{border-width:1px;color:@pink+666;}}}}

CSS：

#headerh3{font-size:26px;font-weight:bold;}#header.sub_title{color:#ff00ff;}#header.study_list{color:#ff6fff;}#headerp{font-size:12px;}#headerpa{text-decoration:none;}#headerpa:hover{border-width:1px;color:#ffffff;}

示例二

Less：

@url:"../p_w_picpaths";.filter(@blur){-webkit-filter:blur(@blur);-moz-filter:blur(@blur);-ms-filter:blur(@blur);filter:blur(@blur);}.border-radius(@radius:5px){-webkit-border-radius:@radius;-moz-border-radius:@radius;border-radius:@radius;}#loginForm{width:80%;margin:0auto;ul{li{margin:15px0;&:nth-child(2){position:relative;}label{color:#d4d2d2;font-family:'MicrosoftYahei';font-weight:bold;font-size:1.1em;}}}.imgBground{width:100%;height:28vh;filter:url(blur.svg#blur);.filter(5px);.border-radius(10px);background:url('@{url}/1.jpg');}

CSS:

#loginForm{width:80%;margin:0auto;}#loginFormulli{margin:15px0;}#loginFormulli:nth-child(2){position:relative;}#loginFormullilabel{color:#d4d2d2;font-family:'MicrosoftYahei';font-weight:bold;font-size:1.1em;}#loginForm.imgBground{width:100%;height:28vh;filter:url(blur.svg#blur);-webkit-filter:blur(5px);-moz-filter:blur(5px);-ms-filter:blur(5px);filter:blur(5px);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;background:url('../p_w_picpaths/1.jpg');}

详情参考官方文档：

http://www.css88.com/doc/less/features/#mixins-feature