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

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

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

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

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

@mixin:

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

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

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

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

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

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

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

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版本中，還有一個不同視寬下的gutter組，在beta版本中已被刪除。

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

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

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

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

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

breakpoint-infix：

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

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

在這個函數(shù)中有一個判斷，即如果breakpoint-min()函數(shù)返回的值是null，那么整個函數(shù)將返回一個空字符串，而在min函數(shù)中，只有等級為“xs”時，才會返回null，所以，在創(chuàng)建列的類名時，你將再也看不見“.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;
  }
}

關(guān)于media的都用@mixin定義，而不是前面的@function了。這里的兩個mixin，功能也簡單，就是利用前面提到的breakpoint-min和breakpoint-max函數(shù)，定義變化節(jié)點的media query，這樣在創(chuàng)建網(wǎng)格時，就能根據(jù)預(yù)先設(shè)定的幾個等級來進行響應(yīng)式變化了。這里的up和down，可以理解成“大于(up)”、”小于(down)”，親測，在后續(xù)的應(yīng)用中，基本都是用的media-breakpoint-up。如果你打算重寫B(tài)ootstrap，那么用用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表示在某個區(qū)間范圍內(nèi)的情形，可以用來跨等級，比如說給“sm”一種排版，然后給“md”到“xl”一種排版（真的有人會這么干嗎？）。而only這個@mixin有些奇怪，在Alpha6中它將between包在了其中，在Beta中它也做了大致相同的事，只是多進行了一些判斷。而且正如其函數(shù)名所示，它表示“僅”，直接把表達式寫出來可能更直觀，（前綴省略）

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

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

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

_grid.scss

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

關(guān)于這個@mixin集合，一言以蔽之，即，想建網(wǎng)格就靠它。
這是一個網(wǎng)格搭建的基礎(chǔ)集合，但單靠它，我們還是創(chuàng)建不出Bootstrap引以為傲的12列網(wǎng)格系統(tǒng)的，想提前知道原因的話可以打開_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%;
}

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

在scss中寫一個

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

你創(chuàng)建的實際上是一個在Bootstrap中以“container-fluid”為類名的流體容器，仔細觀察這個@mixin，你就會發(fā)現(xiàn)，它指定了容器寬度為100%，在實際的瀏覽器中的表現(xiàn)為橫向全屏，任憑你調(diào)整瀏覽器的窗口大小，這一點都不會變（當(dāng)然，它自帶一個左右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，就能創(chuàng)建出大家熟悉的.container了（其實這一點在根目錄下的_grid.scss就可以找到）。在這個@mixin里，它確定了width=$container-max-width（在變量中有定義），這就代表著根據(jù)這個@mixin創(chuàng)建出的容器，不會再像流體容器那樣寬度隨心所欲，而是呈階梯性變化，某種程度上，這更符合我們的預(yù)期和使用習(xí)慣。

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這個基礎(chǔ)構(gòu)建的變化意味著整個b4框架在很大程度上都會建立在flexbox的基礎(chǔ)上（IE8滾蛋吧）。

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

make-col:

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

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

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

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

  
...
  
...

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

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

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

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

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