为了能实现非等宽项目的布局，我们的思路是： 禁用 Flex 项目的伸缩特性，使用百分比 width 指定宽度 。
首先，禁用 Flex 项目的伸缩特性，使用到的属性如下：
flex-shrink: 0;
flex-grow: 0;
flex-basis: 0;这三个属性等价的快捷写法是：
flex: none;然后就是使用百分比 width 指定宽度了。
我们实现的是一行最多 12 列的栅格布局。也就是说把一行划分成 12 列，每一列的宽度大约占总宽度的 8.33% 。我们用 .is-列数 指定一个项目占据的列数：
.is-1
.is-2
.is-3
.is-4
.is-5
.is-6
.is-7
.is-8
.is-9
.is-10
.is-11
.is-12
根据这个规律，我们可以很容易地写出栅格布局代码：
$columns: 12;.row {
display: flex;
.col {
flex-grow: 1;
flex-basis: 0;
@for $i from 1 through 12 {
&.is-#{$i} {
flex: none;
width: percentage($i / 12);
}
}
}
}
这里我们使用 @for 指令的
@for $var from <start> through <end> 语法，从 1 递增到 12，定义了 .is-* 这一系列类名，原理就是我们说过的禁用了 Flex 项目的伸缩特性，指定给它百分比宽度。怎么样，很简单吧。接下来再加上折行（
.row.is-multiline ）和 Flex 项目偏移（
.is-offset-* ）的支持。我们总揽下代码：
$columns: 12;.row {
display: flex;
&.is-multiline {
flex-wrap: wrap;
}
.col {
flex-grow: 1;
flex-basis: 0;
@for $i from 1 through 12 {
&.is-#{$i} {
flex: none;
width: percentage($i / 12);
}
&.is-offset-#{$i} {
margin-left: percentage($i / 12);
}
}
}
}
.is-multiline 是跟随 .row 一起使用的，得到的就是 flex-wrap: wrap 的效果；项目偏移则借助 margin-left
属性实现。
到这里，我们的 12 列栅格布局就写完了 ヾ(◍°∇°◍)ﾉﾞ
完整代码
我们把上面两部分的代码整合起来，就能得到一个最小的响应式布局系统了~ O(∩_∩)O
$breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
xs: none,
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
