Less 中的混入指将通用的样式抽取出来放在一个 class 下面，然后在需要的地方应用该 class。
在 LESS 中我们可以为一个 class 定义一些通用的属性集，然后在另一个 class 中去调用这些属性。下面有这样一个 class：
// 公用的样式
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}如果我们现在需要在其他 class 中引入那些通用的属性集，那么我们只需要在任何 class 中像下面这样调用就可以了：
#menu a {
color: #111;
// 引入公用的样式
.bordered;
}
.post a {
color: red;
// 引入公用的样式
.bordered;
}.bordered class 里面的属性样式都会在 #menu a 和 .post a 中体现出来，编译 less 输出的 CSS 如下：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}注意：在 Less 中，任何 CSS 的 class, id 或者 元素 属性集都可以以同样的方式引入。
在 LESS 中，你还可以像函数一样定义一个带参数的属性集合。例子：
// 这里定义了一个类，默认参数为 5px
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
// 调用前面定义的类 rounded-corners，参数使用默认值 5px
.rounded-corners;
}
#footer {
// 调用前面定义的类 rounded-corners，且传递参数 10px
.rounded-corners(10px);
}编译 less，输出的 CSS 如下：
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}使用 Less 动态设置圆角大小，通过参数 @radius 动态传递圆角大小。如下：
// 定义通用代码
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#header {
// 调用，圆角为 4px
.border-radius(4px);
}
.button {
// 调用，圆角为 6px
.border-radius(6px);
}编译 less，输出的 CSS 如下：
#header {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.button {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}使用 Less 给参数设置默认值：
// 定义公用样式，设置参数 @radius 默认值为 5px
.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#header {
// 引用公用样式，采用默认值参数
.border-radius;
}编译 less，输出的 CSS 如下：
#header {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}你也可以定义不带参数属性集合，如果你想隐藏这个属性集合，不让它暴露到 CSS 中去，但是你还想在其他的属性集合中引用。那么在定义属性集合时添加一对空括号集合。例子：
// 下面带了 () 括号，所以不会输出到 CSS，除非手动调用
.wrap() {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre {
// 引用属性集合，即调用
.wrap
}编译 less，输出的 CSS 如下：
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
川公网安备51010802032098
