SASS Mixin实现响应式布局

喜欢ヅ旅行 2022-08-26 08:02 192阅读 0赞

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

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

[在线研究][Link 1]点这里，[下载收藏][Link 2]点这里。

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

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][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[Chris Coyier]: http://chriscoyier.net/
[Link 1]: http://codepen.io/whqet/pen/jkqJA
[Link 2]: http://codepen.io/whqet/share/zip/jkqJA/
[whqet]: http://blog.csdn.net/whqet