用less来实现栅格响应式布局

MDN关于响应式布局的一个汇总网页
这个网页主要针对三个方面进行介绍，一个是流布局，一个是媒体查询，一个是流图片。

百度前端学院的这个任务其实是布局方面的简化。
任务分解而言，就是根据页面不同的分辨率有不同的布局。

@media

首先关于css3的@media 详细
@media能够针对媒体设备进行样式的定义。所以类似bootstrap，我们首先对于一个节点，我们设置不同的类。

<div class="outer col-md-4 col-sm-6">
    <div class="inner"></div>
</div>

主要针对两种屏幕宽度，所以我们在样式中区别对待，比如col-md就是针对768像素以上宽度的分辨率,而设置min-width就能指定特定屏幕宽度的样式。

@media (min-width: 769px) {  
.col-md-4{}
}

因此，我们理论上是要实现这样的效果

@media (min-width: 769px) {
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
}
@media (max-width: 768px) {
  .col-ms-12 {
    width: 100%;
  }
  .col-ms-11 {
    width: 91.66666667%;
  }
  .col-ms-10 {
    width: 83.33333333%;
  }
  .col-ms-9 {
    width: 75%;
  }
  .col-ms-8 {
    width: 66.66666667%;
  }
  .col-ms-7 {
    width: 58.33333333%;
  }
  .col-ms-6 {
    width: 50%;
  }
  .col-ms-5 {
    width: 41.66666667%;
  }
  .col-ms-4 {
    width: 33.33333333%;
  }
  .col-ms-3 {
    width: 25%;
  }
  .col-ms-2 {
    width: 16.66666667%;
  }
  .col-ms-1 {
    width: 8.33333333%;
  }
}

是不是要有很多手工劳动力？所以接下来我们的less出场了;

less的mixin

首先，有一个接近于变量的存在。比如说我们的布局主要由1~12,所以我们将12定义了

@iterations: 12;

其次，我们发现无论是.col-ms-n还是.col-md-n，他们都是有一个公式的，将100%分成12份再乘以n,这里有一个循环。我们用嵌套Mixins,Mixins相当于一个模板
可以从

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

到

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

当然也可以带参数，从

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding: 2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}

到

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

最后利用Mixin来形成循环。

.mixin-loop (@i,@type) when (@i > 0) {
  .col-@{type}-@{i}{
    width: 100% / (12 / @i );
  }
  .mixin-loop(@i - 1,@type);
}

再在相应的位置调用

@media (min-width: 769px) {
  .mixin-loop(@iterations,md)
}

@media (max-width: 768px) {
  .mixin-loop(@iterations,ms)
}

Bootstrap源码

抽取bootstrap关于grid布局的源码。

@import "variables";
@import "mixins/grid";
@import "mixins/grid-framework";

@import "grid";

grid-framework.less