less栅格系统，可自定义列数、列间距宽等

为方便以后直接使用，特此笔记

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

*{
    box-sizing: border-box;
}
//清除浮动
.clearfix{
    &:after{
        content:'';
        display:block;
        clear:both;
    }
}


//变量定义
@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;




//1.容器的实现
.make-container(){
    //contain容器
    .container{
        .container-common();
        //清除浮动
        // .clearfix;
        &:extend(.clearfix all);
        //小屏幕
        @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-fluid{
        .container-common();
        //清除浮动
        &:extend(.clearfix all);
    }
    //共同  mixin
    .container-common(){
        margin-right: auto;
        margin-left: auto;
        padding-left: @grid-gutter-width/2;
        padding-right: @grid-gutter-width/2;
    }
    
}
.make-container();

.make-row(){
    .row{
        margin-right: -@grid-gutter-width/2;
        margin-left: -@grid-gutter-width/2;
    }
}
.make-row();


//列的实现
.make-grid-columns(){
    // .col(@index){


    //     .col(@index+1,@index);
    // }
    .col(@index){
        // @selecto: ~'col-lg-@{index}'
        @selector: ~'.col-lg-@{index},.col-md-@{index},.col-sm-@{index},.col-xs-@{index}';
        .col(@index+1,@selector);
    }
    .col(@index,@list) when (@index <= @grid-columns) {
        @selector: ~'@{list},.col-lg-@{index},.col-md-@{index},.col-sm-@{index},.col-xs-@{index}';
         
        .col(@index+1,@selector);
    }

    .col(1);
    .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;
        }
    }
}

.make-grid-columns();
//屏幕处理和偏移处理mixin
.make-column(@type,@property){
    .col(@index) when(@index <= @grid-columns) {
        @selector: ~'.col-@{type}-@{index}';
        @{selector}{
            @w: @index/@grid-columns*100;
            @{property}: ~'@{w}%';
        }
        .col(@index+1);
    } 
    .col(1);
}
//超小屏幕宽度处理
.make-column(xs,width);
//超小屏幕偏移处理
.make-column(xs-offset,margin-left);

//小屏幕控制
@media(min-width: @screen-sm){
    //屏幕宽度处理
    .make-column(sm,width);
    //偏移处理
    .make-column(sm-offset,margin-left);
}

//中屏幕控制
@media(min-width: @screen-md){
    //屏幕宽度处理
    .make-column(md,width);
    //偏移处理
    .make-column(md-offset,margin-left);
}

//大屏幕控制
@media(min-width: @screen-lg){
    //屏幕宽度处理
    .make-column(lg,width);
    //偏移处理
    .make-column(lg-offset,margin-left);
}