SASS Mixin实现响应式布局

前端开发whqet,csdn,王海庆,whqet,前端开发专家

好的，今天我们来研读下css大牛Chris Coyier的利用SASS实现响应式布局的解决方案(Simple Technique for using Sass for Rows)。

在线研究点这里，下载收藏点这里。

先看实现过程，然后我们再来解读。

html文件，里面放了N多个图像，为了简化书写我们用了jade

- for (var x = 1; x < 16; x++)
  div.pic
    img(src="http://gx.zptc.cn/whqet/img/1.jpg")
    h3 Darth

编译之后生成的html是这样的，jade的简化能力可见一斑。

<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>

当然，这里我们也可以使用emmet书写，同样的高效！！

div.pic*16>img[src="http://gx.zptc.cn/whqet/img/1.jpg"]+h3{Darth}

对于响应式分列来说，最重要的每列宽度的计算和列间空隙的处理。

列间空隙的处理，每行的最后一列没有空隙，前面的其他列具有统一的空隙，水平和垂直方向的空隙相等。

每列宽度采用百分比的形式进行计算，每列宽度=(总宽度-空隙总宽度)/列数=(总宽度-(列数-1)*空隙宽度)/列数。

这样，我们就可以得出分列的sass mixin。

//分列的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了，通过媒体查询，给不同设备设置不同的列。

* {
  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%; 
  }
}

好的，完工，希望能对您有所帮助，欢迎拍砖。

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------