摘要：候補(bǔ)，分別代表兩種寬度之間和僅在一種寬度下的情形。這里是一個(gè)很重要的變化，大家可以注意到，這里的變成了，這也是主要的改進(jìn)之一，這個(gè)基礎(chǔ)構(gòu)建的變化意味著整個(gè)框架在很大程度上都會(huì)建立在的基礎(chǔ)上滾蛋吧。

本文所引用的版本為Bootstrap 4 Beta版，閱讀者請(qǐng)先下載好相關(guān)源文件。
時(shí)光荏苒，若后續(xù)版本代碼發(fā)生變化，將看心情進(jìn)行更新補(bǔ)充。如果你覺(jué)得本文不錯(cuò)，歡迎評(píng)論支持，如需轉(zhuǎn)載請(qǐng)標(biāo)明作者及出處，謝謝。
在日常使用Bootstrap的時(shí)候，我們最常見(jiàn)的做法是給HTML內(nèi)的元素添加上預(yù)設(shè)的類(lèi)名，這種方法直觀(guān)且易于調(diào)試。但是對(duì)于一個(gè)前端潔癖患者來(lái)說(shuō)，在HTML標(biāo)簽內(nèi)添加一大堆類(lèi)名簡(jiǎn)直和內(nèi)聯(lián)style一樣讓人深?lèi)和唇^。那么在這種時(shí)候，學(xué)會(huì)使用Bootstrap的Scss，利用其內(nèi)置的函數(shù)和@mixin來(lái)對(duì)你自己命名的類(lèi)進(jìn)行樣式添加就成了一件很棒很酷的事。

變量：_variables.scss（起始行:171，結(jié)束行：205）

函數(shù)：_function.scss //其中函數(shù)主要用于變量文件中，在此不述

公共類(lèi)：_flex.scss //在utilities文件夾下，用于flex布局的各種類(lèi)，只是給屬性加了包裝，同樣不述

@mixin:

_breakpoints.scss //斷點(diǎn)函數(shù)區(qū)，包括斷點(diǎn)區(qū)間查找、自動(dòng)擴(kuò)展媒體查詢(xún)等功能

_grid.scss //輔助mixin，提供容器、行、列創(chuàng)建

_grid-framworks.scss //核心mixin，依據(jù)斷點(diǎn)，循環(huán)創(chuàng)建以flex為基礎(chǔ)的12網(wǎng)格

引用：_grid.scss //自動(dòng)創(chuàng)建包括12列網(wǎng)格在內(nèi)的布局，本質(zhì)上是對(duì)_grid-frameworks和_grid的引用

$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五個(gè)等級(jí)，分別表示極小、小、中等、大、超大。這個(gè)斷點(diǎn)設(shè)置主要用于媒體查詢(xún)，即當(dāng)瀏覽器視窗橫向尺寸發(fā)生變化時(shí)，一旦到了指定條件，比如width=768px，就將觸發(fā)設(shè)置在md斷點(diǎn)下的樣式。這些等級(jí)的數(shù)據(jù)可以按需改動(dòng)，全局凡是引用這個(gè)map的都將受到影響。

在文檔注釋中提到，這里設(shè)置的數(shù)值表示變化的最小值，即觸發(fā)md的條件是≥768px。

在變量$grid-breakpoints后跟著兩個(gè)@mixin，這兩個(gè)@mixin定義在根目錄下_function.scss文件中，都起一個(gè)判斷作用，其中_assert-ascending()是確保整個(gè)$grid-breakpoints的內(nèi)容是按升序排列，即從小到大；_asseert-starts-at-zero()是確保$grid-breakpoints的第一個(gè)元素值必須為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");

相比較于網(wǎng)格斷點(diǎn)變量，這里的容器變量刪去了xs等級(jí)，只余下了4個(gè)等級(jí)。這并不違背邏輯，因?yàn)樵谧⑨屩?，這里寫(xiě)的數(shù)值表示容器寬度的最大值。舉個(gè)例子，在md條件下，視窗最小寬度為768px，而容器最大寬度為720px，留有一定的余地。所以這樣的話(huà)，數(shù)值為0的xs在容器寬度這里是沒(méi)有意義的，標(biāo)記為sm的容器寬度值就是在0-540px之間變動(dòng)，正對(duì)應(yīng)著視窗寬度xs到sm的區(qū)間。變量后緊跟著的函數(shù)之前已經(jīng)提過(guò)，這里不再贅述。

grid-columns：

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

這里的grid-columns指的是包括$grid-columns、$grid-gutter-width在內(nèi)的網(wǎng)格列定義。
這兩者（$grid-columns、$grid-gutter-width）都是初始定義，分別表示總列數(shù)和列間隔，在之前的alpha6版本中，還有一個(gè)不同視寬下的gutter組，在beta版本中已被刪除。

至此，網(wǎng)格涉及的變量已經(jīng)介紹完，后續(xù)的所有mixin和函數(shù)都是基于這些數(shù)值的，所以這里的數(shù)值很重要，牽一發(fā)而動(dòng)全身。

_breakpoints.scss:

breakpoint-next:

@function breakpoint-next(
  $name, 
  $breakpoints: $grid-breakpoints, 
  $breakpoint-names: map-keys($breakpoints)) 
{
  $n: index($breakpoint-names, $name);
  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}

該函數(shù)看似有三個(gè)，實(shí)際只有兩個(gè)參數(shù)，一個(gè)是$name，即斷點(diǎn)名，需手動(dòng)輸入，第二個(gè)是在變量中定義的斷點(diǎn)的名稱(chēng)列表。該函數(shù)的作用就是返回輸入的斷點(diǎn)名的下一個(gè)斷點(diǎn)，如果沒(méi)有下一個(gè)了，那就返回空值。即breakpoint-next(“sm”)將返回md，breakpoint-next(“xl”)將返回null。

breakpoint-min、breakpoint-max：

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}

@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name, $breakpoints);
  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
}

這兩個(gè)函數(shù)光看函數(shù)名很容易引起誤會(huì)，它們的作用絕非獲取斷點(diǎn)列表中的最大值和最小值，因?yàn)槲覀冊(cè)谑孪榷x斷點(diǎn)列表時(shí)就已經(jīng)確認(rèn)過(guò)斷點(diǎn)列表是按照升序排列的了。這里的min,max指的是當(dāng)前選中等級(jí)的區(qū)間左右值。所以這兩個(gè)函數(shù)都包含$name參數(shù)，當(dāng)對(duì)“md”分別應(yīng)用這兩個(gè)函數(shù)時(shí)，得到的值將是768px（min）和991px（max）。

這里有一個(gè)問(wèn)題，當(dāng)使用breakpoint-max()函數(shù)獲取區(qū)間右值時(shí)，為了不與下一個(gè)斷點(diǎn)數(shù)值上重合，所以進(jìn)行了一個(gè)減一操作（官方的膜法）。

另外就是通過(guò)這個(gè)函數(shù)，能夠知道新的Bootstrap4的一個(gè)小坑，在Bootstrap3中，是有等級(jí)xs的，代表極小，而在新版本中，由于xs設(shè)定值的特殊性（斷點(diǎn)值為0），所以從寬度定義上，xs這個(gè)等級(jí)就被取消了，這里的min函數(shù)，在$name=“xs”的情況下將返回空值，這樣就從數(shù)值上去掉了xs。在后面提到的breakpoint-infix函數(shù)中，將從類(lèi)名定義層次上取消”xs”等級(jí)。

breakpoint-infix：

@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}

核心函數(shù)，直接關(guān)系到類(lèi)名的自動(dòng)化生成。它的功能是利用前面breakpoint-min()函數(shù)，將斷點(diǎn)名以“-name”的形式返回，即breakpoint-infix(“md”)將返回“-md”，換句話(huà)說(shuō)，這個(gè)函數(shù)的作用就是給斷點(diǎn)名前頭加個(gè)短橫線(xiàn)，等到時(shí)候需要循環(huán)創(chuàng)建列的時(shí)候，就可以利用這個(gè)函數(shù)動(dòng)態(tài)生成諸如”.col-md-4”之類(lèi)的類(lèi)名了。

在這個(gè)函數(shù)中有一個(gè)判斷，即如果breakpoint-min()函數(shù)返回的值是null，那么整個(gè)函數(shù)將返回一個(gè)空字符串，而在min函數(shù)中，只有等級(jí)為“xs”時(shí)，才會(huì)返回null，所以，在創(chuàng)建列的類(lèi)名時(shí)，你將再也看不見(jiàn)“.col-xs-4”，取而代之的是”.col-4”。在從b3遷移至b4的時(shí)候，這一點(diǎn)要尤其注意。

media-breakpoint-up

media-breakpoint-down：

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

關(guān)于media的都用@mixin定義，而不是前面的@function了。這里的兩個(gè)mixin，功能也簡(jiǎn)單，就是利用前面提到的breakpoint-min和breakpoint-max函數(shù)，定義變化節(jié)點(diǎn)的media query，這樣在創(chuàng)建網(wǎng)格時(shí)，就能根據(jù)預(yù)先設(shè)定的幾個(gè)等級(jí)來(lái)進(jìn)行響應(yīng)式變化了。這里的up和down，可以理解成“大于(up)”、”小于(down)”，親測(cè)，在后續(xù)的應(yīng)用中，基本都是用的media-breakpoint-up。如果你打算重寫(xiě)B(tài)ootstrap，那么用用down好像也不錯(cuò)。

media-breakpoint-between

media-breakpoint-only：

@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($lower, $breakpoints);
  $max: breakpoint-max($upper, $breakpoints);

  @media (min-width: $min) and (max-width: $max) {
    @content;
  }
}

@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  $max: breakpoint-max($name, $breakpoints);

  @if $min != null and $max != null {
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else if $max == null {
    @include media-breakpoint-up($name)
  } @else if $min == null {
    @include media-breakpoint-down($name)
  }
}

候補(bǔ)@mixin，分別代表兩種寬度之間和僅在一種寬度下的情形。between好說(shuō)，利用前面的up和down兩個(gè)@mixin表示在某個(gè)區(qū)間范圍內(nèi)的情形，可以用來(lái)跨等級(jí)，比如說(shuō)給“sm”一種排版，然后給“md”到“xl”一種排版（真的有人會(huì)這么干嗎？）。而only這個(gè)@mixin有些奇怪，在A(yíng)lpha6中它將between包在了其中，在Beta中它也做了大致相同的事，只是多進(jìn)行了一些判斷。而且正如其函數(shù)名所示，它表示“僅”，直接把表達(dá)式寫(xiě)出來(lái)可能更直觀(guān)，（前綴省略）

only(“md”)=between(“md”,”md”)

就是這樣一種奇怪的函數(shù)，不排除在后續(xù)對(duì)Bootstrap進(jìn)行拆解時(shí)會(huì)再見(jiàn)到它，不過(guò)目前，它對(duì)我們沒(méi)什么用處。

綜上，除了一些輔助函數(shù)，我們?cè)诤罄m(xù)的網(wǎng)格搭建中會(huì)用到的函數(shù)或者@mixin只有倆，一個(gè)是breakpoint-infix($name)，一個(gè)是media-breakpoint-up($name)。

_grid.scss

這里指的_grid.scss是指的mixins文件夾下的_grid.scss，而非根目錄下的_grid.scss

關(guān)于這個(gè)@mixin集合，一言以蔽之，即，想建網(wǎng)格就靠它。
這是一個(gè)網(wǎng)格搭建的基礎(chǔ)集合，但單靠它，我們還是創(chuàng)建不出Bootstrap引以為傲的12列網(wǎng)格系統(tǒng)的，想提前知道原因的話(huà)可以打開(kāi)_grid-frameworks.scss文件先看看。

順帶一提，和Alpha6版本不同的是，_grid.scss刪除了@mixin make-gutter()，大概是官方覺(jué)得寫(xiě)這么一個(gè)@mixin有點(diǎn)多此一舉吧。

make-container:

@mixin make-container() {
  margin-right: auto;
  margin-left: auto;
  padding-right: ($grid-gutter-width / 2);
  padding-left:  ($grid-gutter-width / 2);
  width: 100%;
}

創(chuàng)建一個(gè)相對(duì)定位的容器，也就是大家熟悉的.container的本體……的一部分。嗯，是的，一部分。如果你新建了一個(gè)

在scss中寫(xiě)一個(gè)

.main{@include make-container();}

你創(chuàng)建的實(shí)際上是一個(gè)在Bootstrap中以“container-fluid”為類(lèi)名的流體容器，仔細(xì)觀(guān)察這個(gè)@mixin，你就會(huì)發(fā)現(xiàn)，它指定了容器寬度為100%，在實(shí)際的瀏覽器中的表現(xiàn)為橫向全屏，任憑你調(diào)整瀏覽器的窗口大小，這一點(diǎn)都不會(huì)變（當(dāng)然，它自帶一個(gè)左右padding）。

make-container-max-width：

@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      max-width: $container-max-width;
    }
  }
}

一般不多帶帶使用，搭配上一個(gè)make-container，就能創(chuàng)建出大家熟悉的.container了（其實(shí)這一點(diǎn)在根目錄下的_grid.scss就可以找到）。在這個(gè)@mixin里，它確定了width=$container-max-width（在變量中有定義），這就代表著根據(jù)這個(gè)@mixin創(chuàng)建出的容器，不會(huì)再像流體容器那樣寬度隨心所欲，而是呈階梯性變化，某種程度上，這更符合我們的預(yù)期和使用習(xí)慣。

make-row:

@mixin make-row() {
  display: flex;
  flex-wrap: wrap;
  margin-right: ($grid-gutter-width / -2);
  margin-left:  ($grid-gutter-width / -2);
}

這里是一個(gè)很重要的變化，大家可以注意到，row這里的display變成了flex，這也是b4主要的改進(jìn)之一，row這個(gè)基礎(chǔ)構(gòu)建的變化意味著整個(gè)b4框架在很大程度上都會(huì)建立在flexbox的基礎(chǔ)上（IE8滾蛋吧）。

順帶吐個(gè)槽，大家可以注意到，make-row里的循環(huán)給每個(gè)row加上了一個(gè)負(fù)margin，大小也正是gutter/2，（即15px,如果你沒(méi)改的話(huà)），目測(cè)是為了抵消創(chuàng)建容器（container）時(shí)padding的影響，所以說(shuō)……嗯……當(dāng)初為啥加個(gè)padding呢？

make-column-ready：

@mixin make-col-ready() {
  position: relative;
  width: 100%;
  min-height: 1px; 
  padding-right: ($grid-gutter-width / 2);
  padding-left:  ($grid-gutter-width / 2);
}

我很奇怪Bootstrap創(chuàng)建了這個(gè)@mixin卻沒(méi)有使用它，在后面的_grid-frameworks.scss中找到了原因，這個(gè)@mixin被替換成了一個(gè)占位符。這應(yīng)該是目前內(nèi)測(cè)版的一個(gè)小疏漏，后續(xù)版本要么刪除這個(gè)@mixin，要么把占位符那一塊進(jìn)行更新?？傊?，這個(gè)@mixin我們先略過(guò)不談。

make-col:

@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage($size / $columns);
  max-width: percentage($size / $columns);
}

嗯，列終于也變成flex布局了，以后等高列，元素垂直居中就很簡(jiǎn)單了。這里簡(jiǎn)單解釋下這個(gè)@mixin，參數(shù)$size為整數(shù)，從1到12，它的列寬計(jì)算也正是基于此，通過(guò)$size/$columns得到占比，以這個(gè)百分?jǐn)?shù)結(jié)果為列寬，這使得其具備一定的響應(yīng)性。

順帶說(shuō)明一下這個(gè)flex，flex：0 0 這是個(gè)簡(jiǎn)寫(xiě)屬性，它的具體意思為不放大也不縮?。▽?duì)應(yīng)情況為有剩余空間或剩余空間不足）的寬度（或主軸空間，一般為橫向）為的flex元素。

這里也有一個(gè)小坑，我在剛開(kāi)始測(cè)試時(shí)，以為make-col()就是12列布局的奧秘所在，于是創(chuàng)建了兩個(gè)div，分別給它們加上make-col(4)和make-col(8)

  
...
  
...

.side{
  @include make-col(4);
}
.main{
  @include make-col(8);
}

剛開(kāi)始，它們也的確如我所想的呈1：2寬度分布，但是當(dāng)我縮小窗口到一定程度的時(shí)候，驚恐地發(fā)現(xiàn)它們并沒(méi)有折行，而是發(fā)生了重疊。

究其原因，就是出在這個(gè)make-col()上，首先，我們慣常是習(xí)慣在列上包一層row，row中我們定義了flex-wrap為wrap，理論上row中的元素在寬度不夠時(shí)會(huì)折行，但是靠make-rol()定義的“.col-”的類(lèi)（為什么沒(méi)有前綴之前在infix中提過(guò)了）的寬度卻是百分比數(shù)，換句話(huà)說(shuō)，它的寬度永遠(yuǎn)是夠的（row內(nèi)的col寬度和永遠(yuǎn)小于等于100%），這樣，當(dāng)你的內(nèi)容縮小到一定程度的時(shí)候，勢(shì)必會(huì)出現(xiàn)溢出現(xiàn)象（容器寬度小于內(nèi)容寬度）。當(dāng)你手動(dòng)調(diào)整，使其和大于12時(shí)，比如make-col(4)和make-col(9)，但這就相當(dāng)于手動(dòng)折行了，效果不算特別理想。

所以經(jīng)過(guò)分析，實(shí)際使用中依然需要搭配前綴，比如大窗口下用md，而這個(gè)不帶前綴的類(lèi)則可以視作xs的替代品，在極小窗口下使用它，但不要多帶帶使用，不然在小窗口情況下，將會(huì)出現(xiàn)溢出情況，如果在頁(yè)面元素多的情況下，影響會(huì)很大。

活在天堂的offset、push、pull，Alph6中存在而在Beta版中被刪除，這里就不多做介紹了，愿它們一路走好