bootstrap-less源码分析：行和列

一、行
grid.less文件中有关行的全部源码

.row {
.make-row();//调用
}

//进mixin/grid.less找到行的定义

.make-row(@gutter: @grid-gutter-width) {
margin-left:  ceil((@gutter / -2));//负的槽宽的一半 -15
margin-right: floor((@gutter / -2));
&:extend(.clearfix all);
}

二、列（最复杂）
grid.less文件中有关列的全部源码

.make-grid-columns();//第一步
.make-grid(xs);//第2.1步
@media (min-width: @screen-sm-min) {.make-grid(sm);
}
@media (min-width: @screen-md-min) {.make-grid(md);
}
@media (min-width: @screen-lg-min) {.make-grid(lg);
}

然后逐行分析
//进mixin/grid-framework.less找到行的定义（包括3个定义,1个调用,由参数的个数可以判断调用的是1）

.make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12
//定义1
.col(@index) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
//~" "里面的内容是避免编译的 但是@{index}会被替换成调用时的实参值
.col((@index + 1), @item);//“递归”调用，但从参数个数可看出调用的是定义2、3
}
//定义2
//@grid-columns是栅格的列数，默认值为12
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), ~"@{list}, @{item}");//真正递归调用，函数名和参数类型个数都一样，第二个参数是拼接成的字符串
}
//定义3
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {//这里将@list这个变量当成了选择器去用
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left:  ceil((@grid-gutter-width / 2));
padding-right: floor((@grid-gutter-width / 2));
}
}
//调用
.col(1); // kickstart it
}

.make-grid(xs);//这是列的第2.1步
//可以看出bootstrap里面移动优先
//进mixin/grid-framework.less找到make-grid()的定义

.make-grid(@class) {
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class, width);
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
.loop-grid-columns(@grid-columns, @class, offset);
}

//再在mixin/grid-framework.less找到float-grid-columns(@class)的定义

//和列的第一步非常相像
//先递归，产生.col-xs-1,.col-xs-2,...,.col-xs-12
//再加选择器
.float-grid-columns(@class) {
.col(@index) { // initial
@item: ~".col-@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
float: left;
}
}
.col(1); // kickstart it
}

//再在mixin/grid-framework.less找到loop-grid-columns的定义

//@index==12,@class==xs,@type==width/pull/push/offset
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);//递归
}

//再在mixin/grid-framework.less找到.calc-grid-column(@index, @class, @type)的定义
//发现是1组共6个,注意到@index在递减

//每次调用.calc-grid-column(@index, @class, width)都会产生一个类似
//.col-xs-12{width:12/12}
//直到.col-xs-1{width:1/12}停下来
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns).calc-grid-column(@index, @class, @type));
}
}

//.calc-grid-column(@index, @class, pull)与.calc-grid-column(@index, @class, pull)都属于列排序

//.calc-grid-column(@index, @class, pull)每次执行会产生一个类似
//.col-xs-push-12{left: 12/12}
//直到.col-xs-push-1{left: 1/12}
//加上@type==width时没有的.col-xs-push-0{left: auto}
//.calc-grid-column(@index, @class, push)就是pull改成push,把left换成right
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {//会被执行12次
.col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {//会被执行1次
.col-@{class}-push-0 {
left: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {//会被执行12次
.col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {//会被执行1次
.col-@{class}-pull-0 {
right: auto;
}
}

//.calc-grid-column(@index, @class, offset)属于列偏移

//每次执行会产生.col-xs-offset-12{margin-left: 12/12}
//直至.col-xs-offset-0{margin-left: 0}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}

余下三个类似，不过是把xs换成了sm,md,lg

@media (min-width: @screen-sm-min) {
.make-grid(sm);
}
@media (min-width: @screen-md-min) {
.make-grid(md);
}
@media (min-width: @screen-lg-min) {
.make-grid(lg);
}

视频地址：https://www.bilibili.com/video/BV1YW411T7yy?p=3