SASS Mixin implements responsive Layout

Okay. Now let's take a look at the Simple Technique for using SASS for Rows solution for implementing responsive layout using Sass ).

Click here for online research and click here for download.

Let's take a look at the implementation process and then explain it again.

The html file contains N images. To simplify writing, we use jade

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

The html generated after compilation is like this, And the jade's simplification capability is evident.

<div class="pic">        
Of course, here we can also use emmet to write, the same efficiency !!

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

For response columns, the most important is the calculation of the width of each column and the processing of the gap between columns.
Processing of gaps between columns. there is no gap in the last column of each row. The other columns in the front have a uniform gap, and the gaps in the horizontal and vertical directions are equal.
The width of each column is calculated in percentages. The width of each column is (total width-total gap width)/The number of columns is (total width-(number of columns-1) * gap width) /columns.
In this way, we can obtain the sass mixin.

// Mixin // The number of connected parameters // Number of columns: $ numPerRow // gap width: $ margin @ mixin rowMachine ($ numPerRow, $ margin) {// calculate the width, width of each column = (total width-total gap width)/number of columns = (total width-(number of columns-1) * gap width)/number of columns width: (100%-($ numPerRow-1) * $ margin)/$ numPerRow; // processing Gaps &: nth-child (n) {margin-bottom: $ margin; margin-right: $ margin;} // processing gap. The gap in the last column is 0 &: nth-child (# {$ numPerRow} n) {margin-right: 0 ;}}

Okay, so that we can use this mixin and set different columns for different devices through media queries.

* {  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%;   }}
Okay, it's finished. I hope it will be helpful to you. Please click it.

---------------------------------------------------------------
Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------