bootstrap 3.0 LESS源代码浅析（一）
我一直以为Bootstrap的LESS源代码精髓在mixins.less，所以这个系列主要也是讲解mixins.less的。
什么是mixins？
混入，或者翻译成混合。官网的说法是：我们可以定义一些通用的属性集为一个 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 中体现出来：
#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 中，我们还可以还可以像函数一样定义一个带参数的属性集合：
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}然后在其他 class 中像这样调用它：
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}如果想详细了解混入，请查看官方文档：http://www.lesscss.net/article/document.html
举个栗子
Bootstrap 3.0中有许多有用的混入函数，第一个无疑是clearfix函数。clearfix是用来清除浮动的。
但是，为什么要清除浮动呢？
如果父元素只包含浮动元素，那么它的高度就会塌缩为零。 形象的说，既然是浮动元素，那么其父级元素就觉得他们都是飘在我上面的玩意，没有占据我的空间，所以高度就塌陷为零了。这时候我们清除浮动，告诉父级元素，你需要包含这些浮动的元素，然后他就被撑开了。
常见的清除浮动技术是这样的：
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearxi {
*zoom: 1;
}不过Boostrap的更容易记：
.clearfix() {
&:before,
&:after {
content: " "; /* 1 */
display: table; /* 2 */
}
&:after {
clear: both;
}
}如果要兼容IE6和IE7则加上：
.clearfix {
*zoom: 1;
}值得注意Bootstrap使用的技术不支持Firefox 3.5以下版本。
clearfix基本原理
远古时代，我们使用一个隐藏的元素进行清除浮动。但自从伪类选择器:after和:before出现后，我们可以通过content来悄悄的在子元素后端，或者前端插入元素，并将其设为clear: both。
:after
:after 选择器在被选元素的内容后面插入内容。
请使用 content 属性来指定要插入的内容。
:before
:before 选择器在被选元素的内容前面插入内容。
请使用 content 属性来指定要插入的内容。
怎么混入？
我们来看看Bootstrap中的例子：
// Panel contents
.panel-body {
padding: 15px;
.clearfix();
}为了防止panel塌陷，Bootstrap使用.clearfix()混入函数对.panel-body处理，编译后如下：
.panel-body {
padding: 15px;
}
.panel-body:before,
.panel-body:after {
display: table;
content: " ";
}
.panel-body:after {
clear: both;
}完成收工！
该方案原作者的解释
这种clearfix方案，生成了两个伪元素，并将其display设置成table。这将创建一个匿名的table-cell和一个 新的块状区域，这意味着：:before伪元素阻止了顶部边缘塌陷。而:after伪元素清除了浮动。其结果是，没有必要隐藏任何生成的内容，并减少所需 的代码量。