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伪元素清除了浮动。其结果是，没有必要隐藏任何生成的内容，并减少所需的代码量。