首先關(guān)于bootstrap從v3的less轉(zhuǎn)到v4的sass的十萬個為什么，這里暫且不表（計劃會另起一篇文章對比less，sass，postcss）。

一起走進bootstrap v4 sass

1、bootstrap的sass文件都放在scss目錄，為什么名字是scss而不是sass呢？主要涉及到sass與scss兩種語法的區(qū)別，scss語法更接近css，所以更受大家喜愛，使用更廣泛。具體可參考 sass 語法

2、scss文件分為兩種，一種是以下劃線開頭的如 _variables.scss ，一種是沒有下劃線的如 bootstrap.scss ，這兩個的區(qū)別是前者表示被導(dǎo)入的文件，默認不會編譯成對應(yīng)的css文件，而后者會編譯對應(yīng)的css文件。所以如果有兩個文件 _a.scss ， b.scss 默認編譯結(jié)果是只有 b.css 文件，如果b要使用 _a.scss 中的樣式，那么可以使用導(dǎo)入功能 @import a （導(dǎo)入的文件是可以省略下劃線及文件后綴名的）。具體也可參考 sass 語法

3、如果編譯整個scss目錄，我們可以得到四個css文件，分為是 bootstrap.css , bootstrap-flex.css , bootstrap-reboot.css , bootstrap-grid.css ，這四個css樣式分別由下面的四個scss文件生成。

bootstrap-reboot為重置樣式，bootstrap-grid為網(wǎng)格樣式，這兩個可以看作贈送的單獨樣式，如果某些場景你不想使用整個bootstrap樣式，但是又想用它的重置或網(wǎng)格系統(tǒng)，那么可以直接使用這兩個。

bootstrap和bootstrap-flex的區(qū)別是前者使用傳統(tǒng)的布局方式，后者用的是的是flex方式，所以可以根據(jù)自己的實際情況選擇使用。從上面圖上可以看到 bootstrap-flex.scss 在導(dǎo)入 bootstrap.scss 之前，重置了 $enable-flex: true

4、打開 bootstrap.scss ，可以看到里面導(dǎo)入了各種文件，整體分為6大塊，分別為：

variable & mixin：引入變量及mixin文件，其中 _mixin.scss 文件中導(dǎo)入了mixin目錄中的所有文件
reset：引入normalize 及 print文件
core：引入基礎(chǔ)樣式文件，如grid，form，table，button等
component：引入組件文件，如nav，card，breadcrumb等
component js：引入需要js控制的組件文件，如modal，tooltips等
utility：引入一些全站的class文件，里面有些通用的class，如clearfix，center-block等

如何使用并修改bootstrap v4的樣式

如果你對sass熟悉的話，可以直接使用其sass；當然如果你不熟悉sass的話，可以到目錄dist/css中找到編譯好的 bootstrap.css 。

下面我們先說下直接使用css的：

在html中引入 <link href="bootstrap.css" rel="stylesheet" />
如需修改bootstrap樣式，可另建一個樣式表如 style.css ，覆蓋bootstrap樣式。不建議直接修改打開 bootstrap.css 樣式表修改既然是用sass寫的，那當然我們可以選擇更高逼格的sass了，同樣sass也有兩種修改辦法，一種是非破壞性的，一種是破壞性的。

對于破壞性的，那就是哪里不合意就修改哪里了，沒什么好招。這里說下對于非破壞性的使用修改，我們可以采用如下方法：

把bootstrap的所有scss文件放在bootstrap目錄

scss
bootstrap 目錄 (原先bootstrap中scss目錄所有文件)
bootstrap.scss
...
mixin目錄
...
_custom-variables.scss (自定義的變量，或覆蓋bootstrap的變量)
_custom-mixin.scss（自定義的mixin）
style.scss

style.scss 代碼如下：

@charset "UTF-8";
// 導(dǎo)入文件
@import "custom-variables";
@import "custom-mixin";
@import "bootstrap/bootstrap";

當然如果有代碼潔癖的，那對于不用的樣式總是想砍掉的，于是重新拿起 bootstrap.scss 審視，把那些不需要的樣式，直接去掉import不就好了嗎。如果考慮到以后升級什么的，那還是建立個新文件，想要什么就自己按照 bootstrap.scss 中的方法引入就可以了。對于組件樣式，需要就引入，不需要就不引入，但是一定要注意core與utility的樣式，因為說不定你的組件中就用了這些基礎(chǔ)的樣式

如何改進bootstrap v4的sass設(shè)計

從個人實戰(zhàn)的經(jīng)驗角度出發(fā)，覺得bootstrap v4有如下幾點缺陷：（僅為個人觀點）

可以進一步進行目錄規(guī)劃，如把所有的組件文件都放在component目錄，utility文件放在utility目錄，那樣看起來更有組織性，現(xiàn)在有點零散，看上去有點亂
沒有 % 設(shè)計，個人覺得 % 的設(shè)計是一個進步，對于樣式的組合申明非常有效，尤其是一些簡短的兼容代碼什么的。

可提供一個scss文件，整合了variables和mixin的功能，那樣就可以方便新起樣式文件，直接導(dǎo)入這個整合的文件，variables和mixin隨便用組件的變量申明，可以放在各自的組件scss中，因為只有組件會用，而不是統(tǒng)一放在variables文件，這樣顯得variables文件比較臃腫mixin設(shè)計有點太多，連size都有一個mixin文件，感覺有點過。

最新評論