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偽元素清除了浮動。其結果是，沒有必要隱藏任何生成的內容，並減少所需的代碼量。