bootstrap 栅格化源码

.make-grid-columns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) { // initial
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), @item);
  }
  .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}");
  }
  .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); // kickstart it
}

　　

难点1： 

时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.

要输出这样的值我们可以在字符串前加上一个 ~, 例如:

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

　

编译后：

.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

就好像less需要输入一个border-radius：~“100px/200px”

看下面领悟

.make-grid-columns() {
    // Common styles for all sizes of grid columns, widths 1-12
    .col(@index) {
        // initial
        @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
        .col2((@index + 1), @item);
    }
    .col2(@index, @list) when (@index =< @grid-columns) {
        // general; "=<" isn't a typo
        @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
        .col2((@index + 1), ~"@{list}, @{item}");
    }
    .col2(@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));
            item:~"@{item}";
            list:~"@{list}"
        }
    }
    .col(1); // kickstart it
}