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

本文所引用的版本為Bootstrap 4 Beta版，閱讀者請先下載好相關源文件。
時光荏苒，若后續版本代碼發生變化，將看心情進行更新補充。如果你覺得本文不錯，歡迎評論支持，如需轉載請標明作者及出處，謝謝。
在日常使用Bootstrap的時候，我們最常見的做法是給HTML內的元素添加上預設的類名，這種方法直觀且易于調試。但是對于一個前端潔癖患者來說，在HTML標簽內添加一大堆類名簡直和內聯style一樣讓人深惡痛絕。那么在這種時候，學會使用Bootstrap的Scss，利用其內置的函數和@mixin來對你自己命名的類進行樣式添加就成了一件很棒很酷的事。

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

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

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

@mixin:

_breakpoints.scss //斷點函數區，包括斷點區間查找、自動擴展媒體查詢等功能

_grid.scss //輔助mixin，提供容器、行、列創建

_grid-framworks.scss //核心mixin，依據斷點，循環創建以flex為基礎的12網格

引用：_grid.scss //自動創建包括12列網格在內的布局，本質上是對_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五個等級，分別表示極小、小、中等、大、超大。這個斷點設置主要用于媒體查詢，即當瀏覽器視窗橫向尺寸發生變化時，一旦到了指定條件，比如width=768px，就將觸發設置在md斷點下的樣式。這些等級的數據可以按需改動，全局凡是引用這個map的都將受到影響。

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

在變量$grid-breakpoints后跟著兩個@mixin，這兩個@mixin定義在根目錄下_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");

相比較于網格斷點變量，這里的容器變量刪去了xs等級，只余下了4個等級。這并不違背邏輯，因為在注釋中，這里寫的數值表示容器寬度的最大值。舉個例子，在md條件下，視窗最小寬度為768px，而容器最大寬度為720px，留有一定的余地。所以這樣的話，數值為0的xs在容器寬度這里是沒有意義的，標記為sm的容器寬度值就是在0-540px之間變動，正對應著視窗寬度xs到sm的區間。變量后緊跟著的函數之前已經提過，這里不再贅述。

grid-columns：

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

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

至此，網格涉及的變量已經介紹完，后續的所有mixin和函數都是基于這些數值的，所以這里的數值很重要，牽一發而動全身。

_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);
}

該函數看似有三個，實際只有兩個參數，一個是$name，即斷點名，需手動輸入，第二個是在變量中定義的斷點的名稱列表。該函數的作用就是返回輸入的斷點名的下一個斷點，如果沒有下一個了，那就返回空值。即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);
}

這兩個函數光看函數名很容易引起誤會，它們的作用絕非獲取斷點列表中的最大值和最小值，因為我們在事先定義斷點列表時就已經確認過斷點列表是按照升序排列的了。這里的min,max指的是當前選中等級的區間左右值。所以這兩個函數都包含$name參數，當對“md”分別應用這兩個函數時，得到的值將是768px（min）和991px（max）。

這里有一個問題，當使用breakpoint-max()函數獲取區間右值時，為了不與下一個斷點數值上重合，所以進行了一個減一操作（官方的膜法）。

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

breakpoint-infix：

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

核心函數，直接關系到類名的自動化生成。它的功能是利用前面breakpoint-min()函數，將斷點名以“-name”的形式返回，即breakpoint-infix(“md”)將返回“-md”，換句話說，這個函數的作用就是給斷點名前頭加個短橫線，等到時候需要循環創建列的時候，就可以利用這個函數動態生成諸如”.col-md-4”之類的類名了。

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

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;
  }
}

關于media的都用@mixin定義，而不是前面的@function了。這里的兩個mixin，功能也簡單，就是利用前面提到的breakpoint-min和breakpoint-max函數，定義變化節點的media query，這樣在創建網格時，就能根據預先設定的幾個等級來進行響應式變化了。這里的up和down，可以理解成“大于(up)”、”小于(down)”，親測，在后續的應用中，基本都是用的media-breakpoint-up。如果你打算重寫Bootstrap，那么用用down好像也不錯。

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)
  }
}

候補@mixin，分別代表兩種寬度之間和僅在一種寬度下的情形。between好說，利用前面的up和down兩個@mixin表示在某個區間范圍內的情形，可以用來跨等級，比如說給“sm”一種排版，然后給“md”到“xl”一種排版（真的有人會這么干嗎？）。而only這個@mixin有些奇怪，在Alpha6中它將between包在了其中，在Beta中它也做了大致相同的事，只是多進行了一些判斷。而且正如其函數名所示，它表示“僅”，直接把表達式寫出來可能更直觀，（前綴省略）

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

就是這樣一種奇怪的函數，不排除在后續對Bootstrap進行拆解時會再見到它，不過目前，它對我們沒什么用處。

綜上，除了一些輔助函數，我們在后續的網格搭建中會用到的函數或者@mixin只有倆，一個是breakpoint-infix($name)，一個是media-breakpoint-up($name)。

_grid.scss

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

關于這個@mixin集合，一言以蔽之，即，想建網格就靠它。
這是一個網格搭建的基礎集合，但單靠它，我們還是創建不出Bootstrap引以為傲的12列網格系統的，想提前知道原因的話可以打開_grid-frameworks.scss文件先看看。

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

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%;
}

創建一個相對定位的容器，也就是大家熟悉的.container的本體……的一部分。嗯，是的，一部分。如果你新建了一個

在scss中寫一個

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

你創建的實際上是一個在Bootstrap中以“container-fluid”為類名的流體容器，仔細觀察這個@mixin，你就會發現，它指定了容器寬度為100%，在實際的瀏覽器中的表現為橫向全屏，任憑你調整瀏覽器的窗口大小，這一點都不會變（當然，它自帶一個左右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;
    }
  }
}

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

make-row:

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

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

順帶吐個槽，大家可以注意到，make-row里的循環給每個row加上了一個負margin，大小也正是gutter/2，（即15px,如果你沒改的話），目測是為了抵消創建容器（container）時padding的影響，所以說……嗯……當初為啥加個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創建了這個@mixin卻沒有使用它，在后面的_grid-frameworks.scss中找到了原因，這個@mixin被替換成了一個占位符。這應該是目前內測版的一個小疏漏，后續版本要么刪除這個@mixin，要么把占位符那一塊進行更新。總之，這個@mixin我們先略過不談。

make-col:

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

嗯，列終于也變成flex布局了，以后等高列，元素垂直居中就很簡單了。這里簡單解釋下這個@mixin，參數$size為整數，從1到12，它的列寬計算也正是基于此，通過$size/$columns得到占比，以這個百分數結果為列寬，這使得其具備一定的響應性。

順帶說明一下這個flex，flex：0 0 這是個簡寫屬性，它的具體意思為不放大也不縮小（對應情況為有剩余空間或剩余空間不足）的寬度（或主軸空間，一般為橫向）為的flex元素。

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

  
...
  
...

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

剛開始，它們也的確如我所想的呈1：2寬度分布，但是當我縮小窗口到一定程度的時候，驚恐地發現它們并沒有折行，而是發生了重疊。

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

所以經過分析，實際使用中依然需要搭配前綴，比如大窗口下用md，而這個不帶前綴的類則可以視作xs的替代品，在極小窗口下使用它，但不要多帶帶使用，不然在小窗口情況下，將會出現溢出情況，如果在頁面元素多的情況下，影響會很大。

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