摘要：在這里面有一個新定義的類，它這個嵌入式展開后是，從結(jié)構(gòu)可以看出來，它就是加在元素上的，可以取消列的默認(rèn)間距。在這里我提供一個自定義的，名字也很簡單。寫的時候注意順序，要按照升序排列，小的放在上面，即在上面，寫反了將失效。

本文所引用的版本為Bootstrap 4 Beta版，閱讀者請先下載好相關(guān)源文件。
時光荏苒，若后續(xù)版本代碼發(fā)生變化，將看心情進(jìn)行更新補(bǔ)充。如果你覺得本文不錯，歡迎評論支持，如需轉(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來對你自己命名的類進(jìn)行樣式添加就成了一件很棒很酷的事。

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

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

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

@mixin:

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

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

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

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

_grid-frameworks.scss

@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  // Common properties for all breakpoints
  %grid-column {
    position: relative;
    width: 100%;
    min-height: 1px; // Prevent columns from collapsing when empty
    padding-right: ($gutter / 2);
    padding-left:  ($gutter / 2);
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);
    @for $i from 1 through $columns {
      .col#{$infix}-#{$i} {
        @extend %grid-column;
      }
    }
    .col#{$infix},
    .col#{$infix}-auto {
      @extend %grid-column;
    }

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }
      .col#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none; // Reset earlier grid tiers
      }

      @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
          @include make-col($i, $columns);
        }
      }

      @for $i from 1 through $columns {
        .order#{$infix}-#{$i} {
          order: $i;
        }
      }
    }
  }
}

整個文件只有一個@mixin make-grid-columns()，這個@mixin才是真正的搭建12列Grid網(wǎng)格系統(tǒng)的核心，讓我們細(xì)細(xì)來拆解。

首先是參數(shù)，引入了列數(shù)($columns)、列間距($gutter)、斷點(diǎn)列表($breakpoints)。這三者都已經(jīng)預(yù)設(shè)好了，不需要操心。

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

下面是占位符%grid-column，這個在之前講make-col-ready()時已經(jīng)講過了，出于減小css體積的考慮，占位符在這里顯然優(yōu)于@mixin。那么這里定義的就是一個列的基本屬性，而min-height的設(shè)置也是考慮到當(dāng)列為空時不至于坍縮。

@each $breakpoint in map-keys($breakpoints) {}

接下來是一個大循環(huán)，這個循環(huán)的根本目的在于為不同的斷點(diǎn)加上相匹配的類，它的循環(huán)依據(jù)就是斷點(diǎn)名。

$infix: breakpoint-infix($breakpoint, $breakpoints);

讓我們以“md”為例進(jìn)入這個循環(huán)，首先是$infix變量，結(jié)合先前的知識，我們了解到，這個$infix的值將是”-md”，讓我們記住它，接下來，又是一個小循環(huán)。

@for $i from 1 through $columns {
   .col#{$infix}-#{$i} {
      @extend %grid-column;
   }
}

這個@for循環(huán)的目的，就是為了創(chuàng)建12列的基本屬性，因?yàn)樗械牧卸季邆?b>%grid-column定義的基本屬性，所以我們將這份共性總結(jié)出來，多帶帶設(shè)置一個循環(huán)進(jìn)行類名構(gòu)建，當(dāng)這個循環(huán)結(jié)束，你就可以看到css里出現(xiàn)了用逗號相連的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, 
 { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; }

它們都有著同樣的屬性，這也是@extend的好處。但是請注意，我們并沒有設(shè)置這些列的寬度，所以它們現(xiàn)在還是不可用的狀態(tài)。

.col#{$infix},
.col#{$infix}-auto {
    @extend %grid-column;
}

接下來有一個多帶帶的小家伙，通過它，你可以發(fā)現(xiàn).col-md這個類也出現(xiàn)了，也是同樣的屬性，這個我們就先不去管它了。

@include media-breakpoint-up($breakpoint, $breakpoints) {}

接下拉就是大頭了，我們引入了media-brakpoint-up()函數(shù)，拿到了media查詢的外包裝

@media (min-width:768px){}

花括號里就是我們要往這個外包裝里塞的內(nèi)容了。

.col#{$infix} {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
 }

首先是一個小家伙，又是這貨，它多帶帶給col-md定義了一些flex屬性，它的意思表明，當(dāng)“.col-md”出現(xiàn)的時候，它將撐滿整行剩余的空間。

.col#{$infix}-auto {
     flex: 0 0 auto;
     width: auto;
     max-width: none; 
 }

接下來定義了“.col-md-auto”類，這個類挺奇葩，寬度隨著內(nèi)容走，跟列寬毛關(guān)系都沒有。

@for $i from 1 through $columns {
   .col#{$infix}-#{$i} {
      @include make-col($i, $columns);
   }
}

接下來的@for循環(huán)就開始定義我們的列寬了，利用make-col()，我們得到了從col-md-1到col-md-12各種不同的列寬。

@for $i from 1 through $columns {
   .order#{$infix}-#{$i} {
      order: $i;
   }
}

最后的這個@for循環(huán)也是從1到12遍歷一次，熟悉flex的同學(xué)會知道，添加的這個order屬性就相當(dāng)于名次，數(shù)值越小越靠前，而在flex布局下的12列Grid也正是依靠這一點(diǎn)來對不同的列進(jìn)行排序的。

至此，“md”下的12列Grid框架構(gòu)建完成。依次類推，其它的斷點(diǎn)列也都是如此生成的。比較特殊的還是斷點(diǎn)”xs”，由于先前提到的原因，最小的那一部分是沒有前綴的，所以你在css里看到的.col-[1-12]就可以視作.col-xs-[1-12]，這需要適應(yīng)一下。

自動化構(gòu)建其它諸如”.container”之類的元素，那個$enable-grid-classes布爾值，在變量里的第126行，默認(rèn)為ture。

$enable-grid-classes: true !default;

換句話說，如果你哪天心情不好，不想用bootstrap的網(wǎng)格系統(tǒng)了，直接把這里改成false就行。

@if $enable-grid-classes {
  .row {
    @include make-row();
  }

  .no-gutters {
    margin-right: 0;
    margin-left: 0;

    > .col,
    > [class*="col-"] {
      padding-right: 0;
      padding-left: 0;
    }
  }
}

在這里面有一個新定義的類“.no-gutter”，它這個嵌入式展開后是“.no-gutter>col,.no-gutter>[class*=”col-”]”，從結(jié)構(gòu)可以看出來，它就是加在row元素上的，可以取消列的默認(rèn)間距。

說回我們的Grid，我們知道，如果不加以控制，那么Bootstrap在編譯Scss的時候會自動生成所有斷點(diǎn)下的列，如果你不打算給每個等級都用上一種布局，那么自動編譯的Scss將會產(chǎn)生大量冗余的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

比如我只想做桌面端和手機(jī)端兩種適配，那么我可能只需要lg和sm的列，css中其它的列代碼對我是沒用的。所以面對這種情況，我們就需要對Bootstrap進(jìn)行修改。這里提供兩種化用方式，如果你有其它的主意，也歡迎在評論區(qū)留言。

在變量文件中注釋掉不需要的列，與之對應(yīng)的容器等級也不要忘記

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  //lg: 992px,
  //xl: 1200px
) !default;
$container-max-widths: (
  sm: 540px,
  md: 720px,
  //lg: 960px,
  //xl: 1140px
) !default;

這是一種很簡單的方式，也很直觀，我需要什么列就用什么列，不需要的我就給扔掉，但是注意，別扔掉默認(rèn)值為0的xs。如果你不是前端潔癖患者，只是想縮減css體積，那么推薦用這種方式。

自己新建一個@mixin，替換掉默認(rèn)的循環(huán)創(chuàng)建行為

第一種方式有一個問題，即雖然你注釋掉了不需要的列，但仍需要在HTML中寫入預(yù)設(shè)的類名。如果你不希望在HTML中寫入一堆以”col-”開頭的類名，那么就嘗試自己定義一個@mixin，來創(chuàng)建自己的列吧。
創(chuàng)建之前注意，在bootstrap-grid.scss中將@import “grid”注釋掉，咱們不需要自動創(chuàng)建。

其次，新建一個scss文件，引入bootstrap-grid。

@import "bootstrap-grid"
%grid-column{
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-left: ($grid-gutter-width/2);
  padding-right: ($grid-gutter-width/2);
}
@mixin make-my-col($breakpoint:null,$size:null,$breakpoints: $grid-breakpoints){
  @extend %grid-column;
  @include media-breakpoint-up($breakpoint,$breakpoints){
    @include make-col($size,$grid-columns);
  }
}

在這里我提供一個自定義的@mixin，名字也很簡單make-my-col。包含兩個參數(shù)，一個是$breakpoint(斷點(diǎn)名)，一個是$size(列寬)。這個@mixin其實(shí)是make-grid-columns()的簡化版。

具體原理不用多說了，因?yàn)槭亲杂?，所以我就沒去考慮參數(shù)驗(yàn)證的問題。如果你有這方面的需求，要應(yīng)用到項(xiàng)目中，可以考慮加上參數(shù)驗(yàn)證。

調(diào)用也很簡單，在你需要的類中直接調(diào)用即可，傳入斷點(diǎn)名和列寬，就能創(chuàng)建在對應(yīng)視寬下的列了。

@import "bootstrap-grid";
.side{
  @include make-my-col(sm,2);
  @include make-my-col(md,6);
}
.content{
  @include make-my-col(sm,10);
  @include make-my-col(md,6);
}

P.S.寫的時候注意順序，要按照升序排列，小的放在上面，即sm在md上面，寫反了md將失效。

這種方式同樣有一個問題，在小型項(xiàng)目中，這樣編譯出的css能顯著縮減css的體積。但在大型項(xiàng)目中，各種類名交錯混雜，利用這種創(chuàng)建單個列的方式，最后生成的css代碼不見得比bootstrap預(yù)定義的類名更好，所以請規(guī)范命名，一些容器元素最好保持固定寬度和固定變化。

Scss顯然是利用Bootstrap更高效的方式，根據(jù)需求，以上兩種方式可任選其一。當(dāng)然，如果你有其它的利用方式，也可以隨心所欲地蹂♂躪Bootstrap~

“好的代碼像一首詩”

以前對這句話只覺得莫名高大上，卻沒有多少感觸。而在閱讀了Bootstrap用Scss寫的源碼之后，卻是真切地感受到了這一點(diǎn)。打開變量(_variables.scss)文件的時候，帶給我的震驚是不可言表的。嚴(yán)謹(jǐn)而有序，體量龐大而層次井然。這些模塊如果一個個看下來，相信會獲益良多。所以如果你和我一樣，是Scss的初學(xué)者，那么瀏覽一下Bootstrap的源碼，絕對會爽翻。

Grid應(yīng)該是Bootstrap的核心區(qū)塊了，從這里入手雖然比較難，但是方便從根本上了解Bootstrap的運(yùn)行方式。

總的來說，Beta版本的Bootstrap4相比于Alpha版本已經(jīng)往前邁了一大步，告別了傳統(tǒng)盒模型的布局方式，轉(zhuǎn)身擁抱flexbox，同時刪去了很多以前的殘余代碼，在初期，習(xí)慣使用b3的同學(xué)可能會覺得不大適應(yīng)，具體表現(xiàn)是

“哎？我寫了這個類咋沒反應(yīng)?。俊?/p>

眼下這個時候，官方說明文檔都不見得會同步更新，看源代碼才是最直接的閱讀學(xué)習(xí)方式。

Grid篇到此結(jié)束，謝謝閱讀，歡迎指出本文的錯漏之處，前端新手上路，請多指教。