BootStrap LESS分析

变量 - clearfix -

获取BootStrap源码。其zip文件只有css，没有less，因此先从GitHub获取开发代码：

$ git clone git://github.com/twitter/bootstrap.git $ cd bootstrap/less

网上有一份less.vim，用Vim阅读LESS文件语法高亮：

$ wget http://leafo.net/lessphp/vim/less.vim$ mv less.vim ~/.vim/syntax/$ vi ~/.vimrc       # 在~/.vimrc中添加au BufNewFile,BufRead *.less set filetype=less

variables.less 文件

variables.less定义了一堆的基础变量（包括色彩和列宽）。BootStrap默认页面大小为940px，页面划分为12列，这里用了几个变量：

@gridColumns:       12;@gridColumnWidth:   60px;@gridGutterWidth:   20px;

12列构成一行，其中每列宽度60px，列间距为20px（共11个间距）。对浮动布局而言，列宽是个百分比：

@fluidGridColumnWidth: percentage(@gridColumnWidth / @gridRowWidth);

除了默认940px的页面，BootStrap还预定义了1200px和768px的页面。

定义了一坨颜色：几种灰度颜色、几种强调色（accent colors），包括我们常见的蓝红黄粉等色彩。这些色彩视觉效果不错，因此我也抄录一份在此：

@blue:                  #049cdb;@blueDark:              #0064cd;@green:                 #46a546;@red:                   #9d261d;@yellow:                #ffc40d;@orange:                #f89406;@pink:                  #c3325f;@purple:                #7a43b6;@linkColor:             #08c;@linkColorHover:        darken(@linkColor, 15%);

mixins.less

clearfix

.clearfix {
  *zoom: 1;             /* for IE 6/7 */
  &:before,
  &:after {
    display: table;
    content: "";
    line-height: 0;     /* for Opera */
  }
  &:after {
    clear: both;
  }}

要理解clearfix的作用先看一个浮动div的示例。如果一个div作为外部容器，内部div设置float后，外部div不能被撑开，如下图：

<div class="cfout">
    <div class="cfin"></div></div>

加上clearfix后的效果：

<div class="cfout clearfix">
    <div class="cfin"></div></div>

clearfix在BootStrap中的几个应用。例如在.dl-horizontal（type.less）中，dt/dd是浮动的，它们的外层是dl：

.dl-horizontal {
    .clearfix();
    dt { float:left; }}<dl class="dl-horizontal">

在.container-fluid（layout.less）中：

.container-fluid { .clearfix(); }

参考：micro clearfix hack。

layout.less

这个文件很短，只定义了2个变量：.container, .container-fluid。