2021-10-10

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);
}