sass简单实现响应式布局

好的，今天我们来研读下css大牛Chris Coyier的利用SASS实现响应式布局的解决方案(Simple Technique for using Sass for Rows)。
在线研究点这里，下载收藏点这里。
先看实现过程，然后我们再来解读。
html文件，里面放了N多个图像，为了简化书写我们用了jade
[html] view plaincopy
- for (var x = 1; x < 16; x++)  
  div.pic  
    img(src="http://gx.zptc.cn/whqet/img/1.jpg")  
    h3 Darth  
编译之后生成的html是这样的，jade的简化能力可见一斑。
当然，这里我们也可以使用emmet书写，div.pic*16>img[src="http://gx.zptc.cn/whqet/img/1.jpg"]+h3{Darth}，同样的高效！！
[html] view plaincopy
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
<div class="pic">  
    <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
    <h3>Darth</h3>  
</div>  
对于响应式分列来说，最重要的每列宽度的计算和列间空隙的处理。
列间空隙的处理，每行的最后一列没有空隙，前面的其他列具有统一的空隙，水平和垂直方向的空隙相等。
每列宽度采用百分比的形式进行计算，每列宽度=(总宽度-空隙总宽度)/列数=(总宽度-(列数-1)*空隙宽度)/列数。
这样，我们就可以得出分列的sass mixin。
[css] view plaincopy
//分列的mixin  
//连个参数  
//    列数：$numPerRow  
//    空隙宽度：$margin  
@mixin rowMachine($numPerRow,$margin) {  
    //宽度的计算，每列宽度=(总宽度-空隙总宽度)/列数=(总宽度-(列数-1)*空隙宽度)/列数  
    width: (100% - (($numPerRow - 1) * $margin)) / $numPerRow;  
    //处理空隙  
    &: nth-child(n) {  
        margin-bottom: $margin;  
        margin-right: $margin;  
    }  
    //处理空隙，最后一列空隙为0  
    &:nth-child(#{$numPerRow}n) {  
        margin-right: 0;  
    }  
}  
好吧，这样我们就可以使用这个mixin了，通过媒体查询，给不同设备设置不同的列。
[css] view plaincopy
* {  
  box-sizing: border-box;   
}  
  
.pic {  
  @include rowMachine(5, 2%);  
  background: white;  
  padding: 10px;  
  float: left;  
    
  h3{  
    margin:0.2em 0;  
  }  
    
  @media (max-width: 1200px) {  
    @include rowMachine(4, 2%);  
  }  
    
  @media (max-width: 900px) {  
    @include rowMachine(3, 4%);  
  }  
    
  img {  
    max-width: 100%;   
  }  
}  
好的，完工，希望能对您有所帮助，欢迎拍砖。