首页 » BootStrap LESS分析

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。

分享

0