2021-03-13

基于Less的自定义栅格系统的实现

bootstrap的栅格系统主要是用于移动端的开发，他能使我们非常高效率地进行响应式布局，栅格系统原理是：
每一行分成12列，每一列宽度占容器的十二分之一，在布局时，我们只要规定在各种分辨率之下（大屏、中屏、小屏等）该div所占的列数，就能很方便地进行布局。
由于每一列之间具有槽宽，在列的最外层我们需要套一个行元素来消除槽宽
具体实现如下：

1. 设置大、中、小屏时屏幕宽度以及最外层容器container宽度
2. 变量声明
3. 行设置
4. 列设置
5. 媒体查询实现完整自定义栅格系统
   这里我们引入了normalize文件，这是用于样式初始化的， 在CSN.CN库里可找到

@import "normalize";
 //清除浮动
.clearfix{
  &:after{
    content: '';
    display: block;
    clear: both;
  }

}
*{box-sizing: border-box;}

//变量声明1200lg992md768sm小于768xs
@screen-lg:1200px;
@screen-md:992px;
@screen-sm:768px;
//contaianer容器的宽度
@container-lg-width:1170px;
@container-md-width:970px;
@container-sm-width:750px;
//列宽
@grid-gutter-width:30px;
//总列数
@grid-columns:12;
//实现
//1、容器实现
.make-container(){
//  contaniner容器的实现
.container{
  .container-common-style();
  .clearfix();
  //小屏幕
  @media(min-width:@screen-sm){
    width: @container-sm-width;
  }
  //中屏幕
  @media(min-width:@screen-md){
    width: @container-md-width;
  }
  //大屏幕
  @media(min-width:@screen-lg){
    width: @container-lg-width;
  }
}
  .container-fluid{
    .container-common-style();
    &:extend(.clearfix all);
  }
  .container-common-style(){
    margin-right: auto;
    margin-left: auto;
    padding-left: @grid-gutter-width/2;
    padding-right: @grid-gutter-width/2;
  }
}
.make-container();
//2、行的设置
.make-row(){
  .row{
    margin-left: -@grid-gutter-width/2;
    margin-right: -@grid-gutter-width/2;
  }
}
.make-row();
//列的实现
//公共样式 1,2,3,4,5,6,7,8,9,10,11,12
.make-grid-columns(){
  .col(@index){
  //  @index
    @selector:~'.col-xs-@{index},.col-md-@{index},.col-lg-@{index}';
    .col(@index+1,@selector);
  }
  .col(@index,@list)when(@index<=@grid-columns){
    @selector:~'@{list},.col-xs-@{index},.col-md-@{index},.col-lg-@{index}';
    .col(@index+1,@selector);
  }
  .col(@index,@list)when(@index>@grid-columns){
    @{list}{
      padding-left: @grid-gutter-width/2;
      padding-right: @grid-gutter-width/2;
      position: relative;
      min-height: 1px;
      float:left;
      margin-top: 1%;
      margin-bottom:1%;
    }
  }
  .col(1);
}
.make-grid-columns();
//宽度设置  .col-xs-1{wdth}
.make-column-width(@width){
  .col(@index) when (@index<=@grid-columns){
  // 拼接 变量
    @selector:~'.col-@{width}-@{index}';
  //  样式控制
  @{selector}{width:percentage( @index/@grid-columns)};
    .col(@index+1);
  }
  .col(1);
}
//.make-column-width(xs);
//元素偏移
.make-column-offset(@width){
  .col(@index) when(@index<=@grid-columns){
  @selector:~'.col-@{width}-offset-@{index}';
    @{selector}{ margin-left: percentage(@index/@grid-columns)};
    .col(@index+1)
  }
  .col(1);
};
//媒体查询阶段 小屏幕
@media (min-width: @screen-sm) {
//  .col-sm-1...12
//  .col-sm-offset-1...12
//  宽度设置
  .make-column-width(sm);
  .make-column-offset(sm);

}
//媒体查询阶段 中屏幕
@media (min-width: @screen-md) {
  //  .col-sm-1...12
  //  .col-sm-offset-1...12
  //  宽度设置
  .make-column-width(md);
  .make-column-offset(md);

}
//媒体查询阶段 大屏幕
@media (min-width: @screen-lg) {
  //  .col-sm-1...12
  //  .col-sm-offset-1...12
  //  宽度设置
  .make-column-width(lg);
  .make-column-offset(lg);

}

相比于bootstrap封装好的栅格系统，我们自定义的栅格系统可以更自主地划分列数，而不仅限于一行十二列，灵活度更高