用 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);
}

本文地址：https://blog.csdn.net/Cool_breeze_/article/details/111829904