本文引用的版本为Bootstrap4Beta版，请读者先下载相关源文件。时间过得真快，如果后续版本的代码有变动，会根据心情更新补充。如果您觉得本文不错，欢迎点赞支持。如需转载，请注明作者和出处，谢谢。在日常使用Bootstrap时，我们最常见的做法是在HTML中为元素添加预设的类名。这种方法直观且易于调试。但是对于一个前端洁癖来说，在HTML标签里面加一堆类名就跟内联样式一样恶心。所以这个时候，学习使用Bootstrap的Scss，使用它的内置函数和@mixin给自己的命名类添加样式就成了一件很棒很酷的事情。涉及的文件变量：_variables.scss(起始行：171，结束行：205)function:_function.scss//该函数主要用在变量文件中，这里不介绍public类：_flex.scss//在utilities文件文件夹下，用于flex布局的各种类型只是对properties进行了封装，同样不做描述@mixin:_breakpoints.scss//断点功能区，包括断点范围搜索，媒体查询自动扩展和其他功能_grid。scss//辅助mixin，提供容器、行、列的创建_grid-framworks.scss//核心mixin，基于断点，循环创建12个flex-basedgrid参考：_grid.scss//自动创建12列Grid-included布局，本质上是对_grid-frameworks和_grid_grid-frameworks.scss@mixin的引用/所有断点的公共属性%grid-column{position:relative;宽度：100%；最小高度：1px；//防止列为空时折叠padding-right:($gutter/2);左填充：（$gutter/2）；}@each$breakpointinmap-keys($breakpoints){$infix:breakpoint-infix($breakpoint,$breakpoints);@for$i从1到$columns{.col#{$infix}-#{$i}{@extend%grid-column;}}.col#{$infix},.col#{$infix}-auto{@extend%网格列；}@includemedia-breakpoint-up($breakpoint,$breakpoints){.col#{$infix}{flex-basis:0;弹性增长：1；最大宽度：100%；}.col#{$infix}-auto{flex:00auto;宽度：自动；最大宽度：无；//重置较早的网格层}@for$i从1到$columns{.col#{$infix}-#{$i}{@includemake-col($i,$columns);}}@for$i从1到$columns{.order#{$infix}-#{$i}{order:$i;}}}}}整个文件只有一个@mixinmake-grid-columns()。这个@mixin才是构建12列Grid网格系统的真正核心。让我们详细拆解一下。首先介绍参数。列数（$columns）、列间距（$gutter）、断点列表（$breakpoints）。这三个已经预设好了，所以你不需要担心它们。%grid-column{位置：相对；宽度：100%；最小高度：1px；padding-right:($gutter/2);左填充：（$gutter/2）；下面是占位符%grid-column，这个我们之前讲make-col-ready()的时候已经提到了。为了减少css的体积，这里的placeholder显然比@mixin要好。那么这里定义的是一个列的基本属性，min-height的设置也考虑到了列为空的时候不会塌陷。@each$breakpointinmap-keys($breakpoints){}接下来是一个大循环。这个循环的根本目的是为不同的断点添加匹配类，它的循环基础是断点名。$中缀：断点中缀（$breakpoint，$breakpoints）；我们以“md”为例进入这个循环，首先是$infix变量，结合前面的知识，我们了解到这个$infix的值会是“-md”，大家记住，接下来，另一个小环形。@for$i从1到$columns{.col#{$infix}-#{$i}{@extend%grid-column;}}这个@for循环的目的是创建12列的基本属性，因为所有的列都有%grid-column定义的基本属性，所以我们总结了这个共性，单独设置一个循环来构造类名。当循环结束时，你可以看到css中出现了逗号。col-md-1到col-md-12.col-md-1、.col-md-2、.col-md-3、.col-md-4、.col-md-5、.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,{位置:相对;宽度：100%；最小高度：1px；向右填充：15px；左填充：15px；它们都具有相同的属性，这也是@extend的好处。但是请注意，我们没有设置这些列的宽度，因此它们还不可用。.col#{$infix},.col#{$infix}-auto{@extend%grid-column;}接下来是单独的小家伙，通过它可以发现.col-md类也出现了，也是一样的属性，先不管它吧。@includemedia-breakpoint-up($breakpoint,$breakpoints){}然后下拉就是大头了。我们引入了media-brakpoint-up()函数，得到了媒体查询的外包装@media(min-width:768px){}花括号中就是我们要塞进这个外包装的内容。.col#{$infix}{flex-basis:0;弹性增长：1；最大宽度：100%；}首先，它是一个小家伙，而这个，它单独为col-md定义了一些flex属性，也就是说当“.col-md”出现时，它会填充整行的剩余空间。.col#{$infix}-auto{flex:00auto;宽度：自动；最大宽度：无；接下来，定义“.col-md-auto”类。这节课相当精彩，宽度随内容围棋，与列宽茂无关。@for$i从1到$columns{.col#{$infix}-#{$i}{@includemake-col($i,$columns);}}下一个@for循环开始定义我们的列宽，使用make-col()，我们得到从col-md-1到col-md-12的各种列宽。@for$i从1到$columns{.order#{$infix}-#{$i}{order:$i;}}最后的@for循环也是从1到12遍历一次，熟悉flex的同学会知道，加的order属性相当于排名，值越小越靠前，下面的12列Grid弹性布局依靠它来对不同的列进行排序。至此，“md”下的12列Grid框架构建完成。以此类推，其他断点列也是这样生成的。特别的是断点“xs”。由于前面提到的原因，最小的部分没有前缀，所以你在css中看到的.col-[1-12]可以看成是.col-xs-[1-12]，需要一点点习惯到。_grid.scss（根目录）自动构建“.container”等其他元素，变量中的$enable-grid-classes布尔值，第126行，默认为ture。$enable-grid-classes:true!default;也就是说，如果有一天你心情不好，不想使用bootstrap网格系统，把它改成false就行了。@if$enable-grid-classes{.row{@includemake-row();}.no-gutters{margin-right:0;左边距：0；>.col,>[class*="col-"]{padding-right:0;左填充：0；其中有一个新定义的类“.no-gutter”，其内嵌扩展为“.no-gutter>col,.no-gutter>[class*="col-"]”，可以这样从结构上看，添加到行元素中，可以取消默认的列间距。回到我们的Grid的使用建议，我们知道，如果不加控制，那么Bootstrap会在编译Scss的时候自动生成所有断点下的列，如果你不打算每一层都使用一个布局，那么自动编译的Scss会生成很多多余的CSS代码。.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col,.col-auto,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm,.col-sm-auto,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md,.col-md-auto,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg,.col-lg-auto,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7、.col-xl-8、.col-xl-9、.col-xl-10、.col-xl-11、.col-xl-12、.col-xl、.col-xl-auto比如我只想适配桌面端和移动端，那么我可能只需要lg和sm这两个列，css中的其他列代码对我来说是没用的。所以面对这种情况，我们需要修改Bootstrap。这里有两种使用方法。如果你有其他的想法，欢迎在评论区留言。注释掉变量文件中不需要的列，不要忘记对应的容器级别$grid-breakpoints:(xs:0,sm:576px,md:768px,//lg:992px,//xl:1200px)！默认;$容器最大宽度:(sm:540px,md:720px,//lg:960px,//xl:1140px)!default;这个方法很简单也很直观，我需要什么列你随便用，你不需要的我会扔掉，但是注意不要把默认值为0的xs扔掉。如果你是不是前端洁癖，只是想减少css大小，那么推荐这个方法。自己新建一个@mixin来代替默认的循环创建行为第一种方法有一个问题，就是虽然注释掉了不需要的列，但是仍然需要在HTML中写上预设的类名。如果你不想在你的HTML中写一堆以“col-”开头的类名，那么尝试自己定义一个@mixin来创建你自己的列。注意在创建之前，注释掉bootstrap-grid.scss中的@import"grid"，我们不需要自动创建。其次，创建一个新的scss文件并导入bootstrap-grid。@import"bootstrap-grid"%grid-column{位置：相对；宽度：100%；最小高度：1px；padding-left:($grid-gutter-width/2);padding-right:($grid-gutter-width/2);}@mixinmake-my-col($breakpoint:null,$size:null,$breakpoints:$grid-breakpoints){@extend%grid-column;@includemedia-breakpoint-up($breakpoint,$breakpoints){@includemake-col($size,$grid-columns);}}在这里，我提供了一个自定义的@mixin，它的名字很简单，叫做make-my-col。包含两个参数，一个是$breakpoint（断点名称），另一个是$size（列宽）。这个@mixin其实就是make-grid-columns()的简化版。具体原理不用说了，因为是个人使用，所以没有考虑参数校验的问题。如果你有这方面的需求，想应用到项目中，可以考虑加入参数校验。调用也很简单，直接在你需要的类中调用，传入断点名和列宽，就可以在相应的视图宽度下创建列。@import"bootstrap-grid";.side{@includemake-my-col(sm,2);@includemake-my-col(md,6);}.content{@includemake-my-col(sm,10);@includemake-my-col(md,6);}附言写的时候要注意顺序，按升序排列，小的放在最前面，也就是sm在md上面，md写反了会失效。这种方法也有问题。在小型项目中，编译后的css可以显着减少css的大小。但是在大型项目中，各种类名相互交织、混杂。使用这种创建单列的方式，最终生成的css代码未必比bootstrap预定义的类名好，所以请规范命名。最好让一些容器元素保持固定宽度和固定变化。Scss显然是一种更高效的Bootstrap使用方式，你可以根据自己的需要选择以上两种方式中的一种。当然，如果你有其他的使用方式，你也可以尽情的蹂躏Bootstrap~总结“好的代码就像一首诗”曾经觉得这句话莫名的高大上，但是并没有太大的感觉。但是看了Bootstrap用Scss写的源码后，才真正体会到这一点。当我打开变量（_variables.scss）文件时，我震惊得说不出话来。严谨有序，庞大而井井有条。如果你把这些模块一一看完，相信你会受益匪浅。所以如果你和我一样是Scss的初学者，那么浏览Bootstrap的源码肯定会耳目一新。Grid应该是Bootstrap的核心块。虽然从这里入手比较困难，但是从根本上了解Bootstrap的运行方式还是很方便的。总的来说，Bootstrap4的Beta版相比Alpha版已经向前迈进了一大步。它告别了传统盒子模型的布局，转而拥抱flexbox。同时，它删除了很多以前的残留代码。在早期，习惯使用b3的同学可能会觉得不适应。具体表现为“咦？我写了这个类，怎么没反应？”目前官方文档可能不会同步更新。最直接的方法就是看源码。阅读你的学习方式。网格文章到此结束。感谢您阅读。欢迎指出本文中的错误和疏漏。前端新手，还请多多指教。
