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

一起走進(jìn)bootstrap v4 sass

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

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

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

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

bootstrap和bootstrap-flex的區(qū)別是前者使用傳統(tǒng)的布局方式，后者用的是的是flex方式，所以可以根據(jù)自己的實(shí)際情況選擇使用。從上面圖上可以看到 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的樣式

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

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

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

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

把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";

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

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

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

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

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

最新評(píng)論