bootStrap的栅格化样式，是实现响应式、移动设备优先的流式栅格系统，在源码中相对应的文件为_grid.scss，这个文件大幅度的使用了sass的@each语法，下面就先仔细说明一下这个的使用。

bootStrap栅格化的实现，是把屏幕分成12份，使用媒体查询，在不同的屏幕宽度下，通过html使用的类名来控制相应元素的宽度。该使用规则如下：

bootstrap对这模块的实现是定义多个不同宽度的类名，对外抛出这些类名供用户使用，期生成的css代码部分如下：

为了生成大量的形式相同的css样式，此模块bootstrap使用了sass的@each方法。

故名思议，@each是用来遍历列表用的，这是官网的实例：

编译出来的效果如下：

@each主要用于生成批量格式相同但数值不同的类。我个人认为必须使用的场景不多， 适用于样式风格统一，且样式变动较少的模块，例如不同颜色的按钮、一系列的字体大小等。

下面补充一个知识点，使用sass，不仅是为了让样式方便管理，也要同时兼顾生成的css文件简洁干净。bootstrap在这方面显得十分严谨，

多个类名共用的样式会写在一起，大大减少了css文件的大小。

对于这个样式的整合，sass其实提供了一个很好用的方法：placeholder。placeholder多次使用，也不会产生重复的css样式，使的生成的css文件更干净。例子如下：

生成css如下：

多个选择器运用了相同的placeholder也只会输出一次代码。省去了没必要的css。