栅格系统 | Stone

文章目錄

1. 原理分析

之前，一直在度娘凤巢，基本都在写js，css比较弱。来丁丁后，官网重构，UE同学提出了栅格化设计，于是研究了下。

原理分析

总的来说，栅格，就是将一个容器，我们将它的宽度，分成n份，来布局。
即: A是某一个格子的宽，n是多少个格子，i是格子间的间隙，w是容器或者页面宽。
(A×n) – i = W
我们以Bootstrap为分析对象。

1. .container

padding-left 和 padding-right各有15px的容器。
a. 固定宽度
screen min：768px——》container的宽度：750px；
screen min: 992px——》container的宽度：970px；
screen min：1200px——》container的宽度：1170px；
b. 响应式，非固定宽 .container-fluid

2. .row

一行row，都必须在一个container内。
row的两侧，都有15px的负margin

3. .col-@{class}-{index}

每个col两边都有15px的padding。
col要在row内使用。在col内想新建栅格系统时，不要在用.container了，直接用.row即可。

4. . col-@{class}-offset-@{index}

偏移，其实，设置了margin-left，即 margin-left: percentage((@index / @grid-columns)); // grid-columns是一共要分成多少格，一般12，24

5. .col-@{class}-pull-@{index}

拉，设置了right，即 right: percentage((@index / @grid-columns));

6. .col-@{class}-push-@{index}

推，设置了left，即 left: percentage((@index / @grid-columns));

####代码解析

grid.less

.container {
  .container-fixed();   // 设置了padding left，right ——》15px

  @media (min-width: @screen-sm-min) {  // 768
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {  //  992
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {  // 1200
    width: @container-lg;
  }
}

.container-fluid {
  .container-fixed();  // 响应式，不需要设置宽度
}

.row {
  .make-row();  // 设置row左右15的负边距
}

.make-grid-columns();  //  生成 .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}  的基本样式，col的左右15px的padding

.make-grid(xs);  // 生成每个格子的width、实现offset、pull、push等，参见下面的代码
@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);
}

mixins/grid.less

.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
  &:extend(.clearfix all);
}
.make-row(@gutter: @grid-gutter-width) {  // grid-gutter-width : 30px
  margin-left:  ceil((@gutter / -2));
  margin-right: floor((@gutter / -2));
  &:extend(.clearfix all);
}

最重要的 mixins/grid-framework.less

// 自动生成12列
.make-grid-columns() {
  .col(@index) { // initial
    // ~ 在less中用于对 CSS 的转义
    @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} {  // 设置列的基本样式，包括padding左右15px等
      position: relative;
      min-height: 1px;
      padding-left:  ceil((@grid-gutter-width / 2));
      padding-right: floor((@grid-gutter-width / 2));
    }
  }
  .col(1); // kickstart it
}


// 最最重要的函数，生成每个格子，class即，xs，sm，md，lg
.make-grid(@class) {
  .float-grid-columns(@class);  // 每个格子，设置float：left属性
  .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); // 设置offset属性
}

// 具体的实现，如下：
.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
}

.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) when (@type = push) and (@index > 0) {
  .col-@{class}-push-@{index} {
    left: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  .col-@{class}-push-0 {
    left: auto;
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  .col-@{class}-pull-@{index} {
    right: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  .col-@{class}-pull-0 {
    right: auto;
  }
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
  .col-@{class}-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
}

// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  .loop-grid-columns((@index - 1), @class, @type);
}