栅格系统源码分析

栅格源码用less写的
我们分析栅格源码可以使我们掌握一些less书写技巧。

在栅格源码里有一个variables.less的文件是用来存储栅格里面的变量的，当他需要使用这些变量的时候就可以来这里调用，而且变量全写在一个文件里容易后期维护，我们在写项目的时候也可以这样

然后有一个入口文件grid.less即这是栅格系统的入口，我们用的栅格系统就是从这里出发，可以看作是一个接口，即这里这个文件调用其他整个栅格系统的文件代码程序，这里面写的很简单但是调用的东西很多，可以把他比作文件向外的枢纽中心。

固体和流体容器的公共样式
这里面后两行的语句是定义的槽宽，什么是槽宽？看这里面

栅格系统的行

栅格行的解释：
这里栅格的行就是包裹所有列的一个盒子

行的源码写在.row的规则集中，他会调用下面的.make-row
这里是定义的行的一部分源码，这里设置了两个外边距为负槽宽的一半

就是这种情况
栅格会超出页面大小

后面是继承.clearfix的规则集，带个all表示全部继承，就等于把.clearfix里面的代码全部复制过来，make-row会调用.clearfix这个是用于清除浮动的
所以我们写代码，可以专门写一个规则集用于放清除浮动的，然后其他某些混合要调用的话可以继承这个规则集，这也是bootstrap开发者推荐的方式

栅格系统的列

栅格列的解释：
这里的列的代码就是设置每列的宽(width)的，递归的使用是为了给每列划分适当的"份数"，即划分各列所占的栅格比例，然后用选择器设置每列对应的所占比例(width)，列其实简单来说也就是用浮动写的，他的换行也是浮动互相挤压，一行挤不进去了然后换行

栅格系统的列，反正就是下图这样，就是一列一列的东西

我们这里设置的是class=col-xs-1他对应的是移动端，所以不会轻易的换行，除非真的放不下了才会换行
这里是被挤的太狠了放不下了，所以换行

这是列的定义的一部分源码，但也是个入口混合通过这个混合来调用其他混合规则集，来实现列的功能

列实现的第一步

下面的作用是选定含有相关属性的容器并为他添加指定的样式

下面是make-grid-columns
用的是递归调用，这是less中唯一的循环方式，首先第三行定义.col()带有一个参数的混合，第二十一行调用这个带一个参数的混合，然后在这个混合当里面第五行又调用带两个参数的混合，这个带两个参数的混合在下面有两个定义，具体掉=调用哪个要看后面的when判断条件

后面第八行和第十二行是less中的判断语句类似于if...else...，即这里是满足后面的when()中括号里的内容时才会调用这个函数，这里的@grid-columns是12

后面第10行，再次调用带一个参数的.col()函数，即递归，此时块级作用域中的@index形参的值增加1，再递归再增加1，慢慢的会超过12，这里是递归循环

下面这里就选出了相关需要加样式的容器
当这里的形参@index变为13即大于12的时候，就会变成15到18行里面的东西

下面就是根据他的属性值来选择容器并为他添加样式
然后调用下面的两个参数的.col()混合，然后就变成了红线圈着的东西

第二步

调用.make-grif()混合
调用.make-grif()混合，bootstrap中移动优先，即就图中那样，代码执行下来，先判断是不是移动端是的话就不会执行下面的代码，不是的话一步步向下执行(这里有页面怎么判断是什么端的内容—>地址)

这是.make-grid()混合

这是.float-grid-columns混合跟上面一模一样的东西，不过这里设置的样式不一样，这里社会的是float:left浮动样式

这是.loop-grid-columns()和.calc-grid-column()混合

还是一个递归，递归结果如下
这里设置他们的宽度

这里有一个写响应式页面的技巧

即我们如果想要我们写的页面在不同终端展现不同的效果，那么我们可以给每个栅格列多加几个类，使他在不同的尺寸下有不同的效果，如下
我们设置这个列在xs(移动端)端的时候是一列占3格一列占9格，当尺寸达到lg端的时候，我们这两个列各占6格

这是xs端

这是尺寸在lg端

我们这个东西的作用还可以用在适应不同页面大小时我们的样式，即比如我们设置calss=col-lg-3 col-md-5，那么设计的页面达到md对应的尺寸的时候就会改变样式，不一定非到其他终端上才能展现他的效果

示例：
比如bootstrap官网这个缩略图

他这里也设置了多个class，这个时候尺寸大，四个缩略图并排，他对应每个缩略图匹配的class=col-lg-3

下面的是页面尺寸缩小，然后并排变成了三个

这个时候匹配的class=col-md-4

然后再页面缩小

这个时候匹配的class=col-sm-6

再缩小

一行一个这个时候匹配的class=col-xs-12

所以他这个栅格系统的每个缩略图class=class=col-lg-3 col-md-4 col-sm-6 col-xs-12

所以我们也可以这样来达到相应的效果

栅格系统之列排序

作用：
push和pull可以用来给元素换位置
即我们可以在不改变html中结构的情况下给栅格中的列换位置
语法：
class=col-x-x-x
col-x-push-x 的意思就是往右推多少份，col-x-pull-x 的意思就是往左拉多少份

源码：
上面是列偏移(pull和push)列排序(offset)的入口混合

他们的混合进去之后也是递归，列排序就变成了下面这种样子，一边是push一边是pull
图上面是把他们递归混合运行展开之后的样子，展开就是这么多个选择器，设置样式
他这里设置的是left和right，col-x-push-x 的意思就是往右推多少份，col-x-pull-x 的意思就是往左拉多少份

两个混合最后变成的结果如上

栅格系统之列偏移

作用：
有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现
这个只能向右偏移，因为bootstrap中这个东西就是设置margin-left的，不过，在bootstrap中他是事先用递归按照比例分配好了
语法：
col-x-offset-x

offset原理是用了margin-left来实现的偏移
列偏移也是递归，然后展开就成了上面那样也是选择器，他设置的是margin-left

总结

总的来说，栅格源码中所有的递归使用都是为了划分出每列应该占的份数即比例，然后再有选择器进行对应列的对应份数的设置