less中 ~ 表示 字符串拼接 例如(bootstrap的源码分析)
.make-grid-columns() {
// 传入index=1;因为最下方 .col(1),所以传入的参数就是1
.col(@index) { // initial
// 在less中 ~ 表示字符串拼接 则
// item = .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
//此时index+1 则 index=2
.col((@index + 1), @item);
}
//默认 grid-columns = 12 此时index = 2 和item = .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
// .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
//.col(3,'.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1 , .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2')
//只要index<=12,那么就执行这个函数,最终就得到1-12列的栅格系统,更改 @grid-columns ,就可以更改栅格的总列数
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{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);
}