本文引用的版本为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的grid参考：_grid.scss//自动创建12列布局包括grid本质上是参考了_grid-frameworks和_grid特征分析变量(_variales.scss):$grid-breakpoints:$grid-breakpoints:(xs:0,sm:576px,md:768px,lg:992px,xl:1200px)!default;@include_assert-ascending($grid-breakpoints,"$grid-breakpoints");@include_assert-starts-at-zero($grid-breakpoints);有xs、sm、md、lg、xl五个等级，分别代表极小、小、中、大、特大。这个断点设置主要用于媒体查询，即当浏览器窗口的水平尺寸发生变化时，一旦达到指定的条件，比如width=768px，就会触发md断点下设置的样式。这些层级的数据可以根据需要进行更改，所有对此地图的全局引用都会受到影响。文档注释中提到，这里设置的值代表变化的最小值，即触发md的条件≥768px。变量$grid-breakpoints后面跟着两个@mixins。这两个@mixins定义在根目录下的_function.scss文件中，都起到了判断的作用，其中_assert-ascending()是为了保证整个$grid-breakpoints的内容是按升序排列的，即从小到大；_asseert-starts-at-zero()是保证$grid-breakpoints的第一个元素值必须为0，即xs必须为0。$container-max-widths:$container-max-widths:(sm:540px,md:720px,lg:960px,xl:1140px)!default;@include_assert-ascending($container-max-widths,"$container-max-widths");与grid断点变量相比，这里的container变量删除了xs层，只留下4层。这并不违背逻辑，因为在注释中，这里写的值代表容器宽度的最大值。比如在md的情况下，window的最小宽度是768px，而container的最大宽度是720px，留了一些空间。所以在这种情况下，容器宽度中值为0的xs是没有意义的，标记为sm的容器宽度值在0-540px之间变化，对应窗口宽度的xs到sm的区间。变量后面的函数前面已经讲过，这里不再赘述。网格列：$网格列：12！默认；$grid-gutter-width:30px!default;这里的grid-columns指的是网格列包括$grid-columns,$grid-gutter-width定义。这两个($grid-columns,$grid-gutter-width)是初始定义，分别代表总列数和列间距。在之前的alpha6版本中，也有不同viewwidth下的guttergroup。在测试版中已被删除。至此，grid涉及到的变量都介绍完了，后面所有的mixins和function都是基于这些取值的，所以这里的取值非常重要，牵一发而动全身。@mixin(mixins文件夹)_breakpoints.scss:breakpoint-next:@functionbreakpoint-next($name,$breakpoints:$grid-breakpoints,$breakpoint-names:map-keys($breakpoints)){$n:index($断点名称，$名称）；@returnif($n
