独立实现栅格系统
一、容器的实现
container
container-fluid
/* 变量声明
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;
/*
1. 容器的实现
*/
.make-container(){
/* container容器的实现 */
.container{
.container-common-style();
/* 清除浮动 */
// .clearfix();
&:extend(.clearfix all);
@media(min-width: @screen-sm){
/* 小屏幕 container的宽度*/
width: @container-sm-width;
}
@media(min-width: @screen-md){
/* 中屏幕 container的宽度 */
width: @container-md-width;
}
@media(min-width: @screen-lg){
/* 大屏幕 container的宽度 */
width: @container-lg-width;
}
}
/* .container-fluid 容器的实现 */
.container-fluid{
.container-common-style();
&:extend(.clearfix all);
}
/* 混合 */
.container-common-style(){
margin: 0 auto;
padding: 0 @grid-gutter-width / 2;
}
};
.make-container();
清除浮动
/* 清除浮动 */
.clearfix{
&:after{
content:'';
display:block;
clear:both;
}
}
调用方法
.clearfix();
或者
&:extend(.clearfix all);（相当于直接给多个元素同时设置相同样式）
&:extend(.clearfix all);相当于：
二、行的实现
.row
/* 行的设置 start */
.make-row(){
.row{
margin: 0 -@grid-gutter-width / 2;
}
};
.make-row();
/* 行的设置 end */
三、列的实现
.col-xs-*
.col-sm-*
.col-md-*
.col-lg-*
.col-offset-*
1-12的拼接过程
/* 列的实现 start */
/* 公共样式 1，2，3，4，5，6，7，8，9，10，11，12 */
.make-grid-columns(){
.col(@index){
// @index 2
.col(@index+1,@index);
}
/* 2 1 */
.col(@index, @list) when(@index <= @grid-columns){
/* 3 1, 2 */
@selector:~'@{
list},@{
index}';
/* 调用自己 */
.col(@index+1,@selector);
}
.col(@index, @list) when(@index > @grid-columns){
@{
list}{
padding-left: 15px;
padding-right: 15px;
}
}
.col(1)
}
.make-grid-columns();
col-xs-1……12,.col-sm-1……12,.col-md-1……12,.col-lg-1……12
.make-grid-columns(){
.col(@index){
// @index 2
@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){
// 3 1, 2
@selector:~'@{
list},.col-xs-@{
index},.col-sm-@{
index},.col-md-@{
index},.col-lg-@{
index}';
// 调用自己
.col(@index+1,@selector);
}
.col(@index, @list) when(@index > @grid-columns){
@{
list}{
padding-left: 15px;
padding-right: 15px;
float: left;
min-height: 1px;
position: relative;
}
}
.col(1)
}
超小屏幕的宽度设置
.col-xs-1{width:} .col-xs-2{width:}
.make-xs-column-width(){
.col(@index) when(@index <= @grid-columns){
//拼接变量
@selector:~'.col-xs-@{
index}';
@{
selector}{
// @w:@index / @grid-columns * 100;
// width: ~'@{
w}%'
// @w: @index/@grid-columns;
width: percentage((@index / @grid-columns));
}
// 递归调用
.col(@index + 1);
}
.col(1);
}
.make-xs-column-width();
/* 超小屏幕的宽度设置end*/
- 注意 ： percentage（）函数 内进行除法 需要一个小括号