經過LESS/Sass自定義Bootstrap的式樣

時間 2019-11-07

標籤經過 sass 自定義 bootstrap 式樣欄目 Bootstarp 简体版

原文原文鏈接

1、定製Bootstrap

在實際前端UI開發中，對Bootstrap的式樣進行自定義是必要的。javascript

定製Boostrap的式樣的方法一般有以下幾種：css

覆蓋原有的bootstrap式樣
經過構建器，對bootstrap中的式樣變量自定義。
經過bootstrap less深度定製式樣。

下面咱們就來分析上面的三種方法各自的優缺點。html

方法1、覆蓋原有的bootstrap式樣

這裏的「覆蓋」是CSS層疊式樣的覆蓋的意思，具體方法是將咱們的my-custom.css文件引用放到bootstrap.css文件的後面，這樣咱們定義的樣式就會覆蓋原有的樣式。前端

優勢：方便，不會變動原來的工做流程。java

缺點：很明顯，會致使式樣不一致和臃腫，以及下降了CSS式樣的可維護性。node

很顯然，這種方法的缺點很是明顯，能夠在非正式場合如測試環境中使用，可是在正式開發環境中是不該該使用。git

方法2、使用構建器自定義bootstrap的式樣變量

使用官網的定製頁面 http://v3.bootcss.com/customize/ 能夠自定義bootstrap的式樣。github

定製好你的變量後點擊download按鈕就會生成一套屬於你的bootstrap框架了。bootstrap

這種方法：sass

優勢：簡便了你對總體網站式樣的更改。

缺點：項目網站的式樣一定是不斷變動的，這意味着你須要不斷的根據你的式樣從新構建bootstrap框架，否則就會重走方法一的老路。

方法3、經過bootstrap less深度定製本身的式樣

Bootstrap3.0的式樣是經過LESS——CSS預處理語言來實現的，固然目前Bootstrap也有了 Bootstrap 從 Less 到 Sass 的源碼移植項目而且Boostrap4.0開始官網已經從Less遷移到Sass了，所以仍是建議直接入手Sass。CSS預處理語言LESS/SCSS，寫法相似CSS可是相比於CSS，提供了變量、函數、運算和選擇器嵌套等語言特性。經過編譯咱們的LESS/SCSS文件，就能夠動態生成CSS式樣。

優勢：定製的變化與原有庫代碼很好的隔離，卻又不失可維護性。而且經過Grunt等JavaScript構建工具還能夠動態編譯LESS/SCSS文件。

缺點：須要必定的學習成本。

2、Bootstrap Less

關於Booststrp less的介紹參考Bootstrap less官方中文文檔。

2.1 bootstrap less 目錄結構

在Bootstrap官網Github項目上，經過查看Less文件夾bootstrap/less 能夠發現一系列的.less後綴結尾的文件。

首先，找到4個關鍵的文件，分別是：

其中，bootstrap.less是bootstrap的主文件，包括全部的.less組件式樣，經過LESS編譯該文件後，就生成咱們本身的bootstrap.css文件。

variable.less是變量定義文件，上述官網的定製頁面 http://v3.bootcss.com/customize/中修改的其實就是這裏定義的變量內容。

utilities.less是實用工具文件，包括通用的清除浮動.clearfix、左浮動和右浮動等式樣。

最後，即是mixins 文件夾了，mixins文件中定義了各類組件的中式樣的"基類"或者是通用的規則定義，bootstrap/less/mixins/labels.less 文件中定義的label-variant(@color)，就被上一級目錄的同名文件中的bootstrap/less/labels.less所引用。

2.2 如何編譯和使用

安裝和使用LESS環境很簡單，參考文檔http://www.bootcss.com/p/lesscss/#guide 。

不過，在正式的開發環境中，一般的作法是結合Grunt工具進行自動構建。

http://www.w3cplus.com/preprocessor/nodejs-and-grunt-compile-sass-to-css.html

3、Bootstrap Sass

3.1 Bootstrap Sass

Bootstrap2和Bootstrap3都是用Less來編譯的CSS，可是從Bootstrap4開始，官方也已經從Lass遷移到Sass了。Sass的出現要比LESS早，雖然LESS發展迅猛且上手迅速，可是Sass也在快速跟進，而且由於相比於LESS，Sass已是一個成熟的框架，提供了更多的功能以及更全面又規範的文檔。所以，雖然Sass的學習曲線比LESS更陡一些，仍是建議使用Sass做爲CSS的預編譯語言。

關於Sass的介紹，參考Sass和Less-CSS預處理語言

3.2 Bootstrap 3 Sass目錄結構

經過查看Github上的Bootstrap 從 Less 到 Sass 的源碼移植項目的目錄，Boostrap 3 Sass的相關式樣文件放置在bootstrap-sass/assets/ 目錄下：

assets
 ├fonts/bootstrap/              ==> glyphicons
 ├images/                       ==> image folder   
 ├javascripts/                  ==> Javascript folder
 └stylesheets/                  ==> .scss files folder

其中，關於bootstrap的式樣文件.scss就存放在bootstrap-sass/assets/stylesheets/ 目錄下。

接下來的結構就和Bootstrap Less一致了，4個關鍵的文件，分別是：

顧名思義，參考2.1，這裏就不在冗述了。