用 less 自制 bs 栅格布局

用 less 自制 bs 栅格布局

/* 全局设置 reset.css  normalize.css */
@import "normalize";

* {
     
  box-sizing: border-box;
}

/* 清除浮动 */
.clearfix {
     
  &:after {
     
    content: "";
    display: block;
    clear: both;
  }
}

/* 变量声明
    1200
    992
    768
 */
// 屏幕的阈值
@screen-lg: 1200px;
@screen-md: 992px;
@screen-sm: 768px;

// container 容器的宽度
@container-lg-width: 1170px;
@container-md-width: 970px;
@container-sm-width: 750px;

// 列宽
@grid-gutter-width: 30px;

// 总的列数
@grid-columns: 12;

/* 实现 */
.mark-container() {
     
  // container 容器的实现
  .container {
     
    .container-common-style();
    // 清除浮动
    //.clearfix();
    &:extend(.clearfix all);

    // 小屏幕 container 的宽度
    @media (min-width: @screen-sm) {
     
      width: @container-sm-width;
    }

    // 中屏幕 container 的宽度
    @media (min-width: @screen-md) {
     
      width: @container-md-width;
    }

    // 大屏幕 container 的宽度
    @media (min-width: @screen-lg) {
     
      width: @container-lg-width;
    }
  }

  // container-fluid 容器的实现
  .container-fluid {
     
    .container-common-style();
    &:extend(.clearfix all);
  }

  // 混合
  .container-common-style() {
     
    margin-right: auto;
    margin-left: auto;
    padding-left: @grid-gutter-width * (1/2);
    padding-right: @grid-gutter-width * (1/2);
  }
}
.mark-container();

// 2. 行的设置
.make-row() {
     
  .row {
     
    margin-left: -@grid-gutter-width * (1/2); // -15px
    margin-right: -@grid-gutter-width * (1/2);
  }
}
.make-row();

// 3.列的实现
// 公共样式  1,2,3,4,5,6,7,8,9,10,11,12  .col-xs-1 ... col-xs-12
.make-grid-columns() {
     
  .col(@index) {
     
    // @index  2     1
    @selector: ~".col-xs-@{
     index}, .col-sm-@{
     index}, .col-md-@{
     index}, .col-lg-@{
     index}";
    .col(@index+1, @selector);
  }
  //     2       1
  .col(@index, @list) when (@index <= @grid-columns) {
     
    // 变量拼接
    @selector: ~"@{
     list},.col-xs-@{
     index}, .col-sm-@{
     index}, .col-md-@{
     index}, .col-lg-@{
     index}"; // 1,2 ==> 1,2,3
    // 调用自己
    .col(@index+1, @selector);
  }
  .col(@index, @list) when (@index > @grid-columns) {
     
    @{
     list} {
     
      padding-left: @grid-gutter-width * (1/2);
      padding-right: @grid-gutter-width * (1/2);
      position: relative;
      min-height: 1px;
      float: left;
    }
  }
  .col(1);
}
.make-grid-columns();

// 超小屏幕的宽度设置  .col-xs-1{
     width: }  .col-xs-2{
     }
.make-column-width(@type) {
     
  .col(@index) when (@index <= @grid-columns) {
     
    // 拼接
    @selector: ~".col-@{
     type}-@{
     index}"; // col-xs-1
    @{
     selector} {
     
      @w: @index * (1/@grid-columns) * 100;
      width: ~"@{
     w}%";
    }
    // 递归调用
    .col(@index+1);
  }
  .col(1); // 1 ==> .col-xs-1
}
.make-column-width(xs);

// 超小屏幕下的偏移设置
.make-column-offset(@type) {
     
  .col(@index) when (@index <= @grid-columns) {
     
    // 拼接
    @selector: ~".col-@{
     type}-offset-@{
     index}"; // col-xs-1
    @{
     selector} {
     
      @w: @index * (1/@grid-columns) * 100;
      width: ~"@{
     w}%";
    }
    // 递归调用
    .col(@index+1);
  }
  .col(1); // 1 ==> .col-xs-1
}
.make-column-offset(xs);

// 媒体查询阶段 小屏幕的情况
@media (min-width: @screen-sm) {
     
  // .col-sm-1 ...... .col-sm-12
  // .col-sm-offset-1 ...... .col-sm-offset-12
  .make-column-width(sm);
  .make-column-offset(sm);
}

// 媒体查询阶段 中屏幕的情况
@media (min-width: @screen-md) {
     
  // .col-md-1 ...... .col-md-12
  // .col-md-offset-1 ...... .col-md-offset-12
  .make-column-width(md);
  .make-column-offset(md);
}

// 媒体查询阶段 大屏幕的情况
@media (min-width: @screen-lg) {
     
  // .col-lg-1 ...... .col-lg-12
  // .col-lg-offset-1 ...... .col-lg-offset-12
  .make-column-width(lg);
  .make-column-offset(lg);
}