編譯BoostrapV3 Sass版本的源碼（涉及Ruby、Sass、Compass、Watcher的配置）

前言

之前已經完成了編譯BoostrapV3 Less版本源碼編譯，按照官方的流程走可以了。由於V4版本是基於Sass的，因此有必要提前做好技術儲備，嘗試一下BoostrapV3 Sass版本源碼的編譯。

開始動手

1、安裝Ruby

下載rubyinstaller-2.3.3-x64.exe 安裝（從官網下載，或者從這裏鏈接：http://pan.baidu.com/s/1o7BxbR0 密碼：rctf），注意，安裝過程中下面的設置。

安裝完成後用命令檢查是否安裝成功，成功會顯示版本信息。

ruby -v
gem -v

2、安裝Sass

gem install sass

安裝完後，C:\Ruby23-x64\bin裏將有下面的文件。

3、安裝compass

gem install compass

查看compass版本

4、引入bootstrap-sass

gem install bootstrap-sass

查看下面目錄裏的文件（目錄爲C:\Ruby23-x64\lib\ruby\gems\2.3.0\gems）,記住這個目錄，後面會經常用到，bootstrap-sass-3.3.7文件夾下的內容就是官方提供的開源項目的源碼。

5、創建我們自己的基於Bootstrap Sass的項目

需要定位到我們將要創建項目的路徑，比如d盤根目錄，新項目名稱爲 myBootstrapSass，命令如下

d:
compass create myBootstrapSass -r bootstrap-sass --using bootstrap

創建成功，會出現下面的提示，同時d盤根目錄出現 myBootstrapSass文件夾。

6、不做任何修改直接編譯

//進入工程文件夾
cd myBootstrapSass
//編譯命令
compass compile

文件D:\myBootstrapSass\stylesheets\styles.css就是編譯生成的文件。

7、修改參數進行定製

筆者習慣用Webstorm打開項目，如下。

_bootstrap-variables.scss裏就是基本的樣式參數，需要改什麼值，將前的註釋去掉，重新編譯即可。
config.rb裏可以修改生成style.css的格式，例如要修改output_style,將output_style前的#去掉，output_style的值與sass命令-t的值一致，就是前面加了冒號

值	效果
:expanded	全部展開，無縮進
:nested	全部展開，有縮進
:compact	一行顯示
:compressed	壓縮後

另外，生成的css文件裏，每個樣式都一行註釋，註明來自哪個scss文件，可修改下面的值，使它不顯示
line_comments = false
修改完成後，在命令行輸入命令進行編譯，可以對比生成的css文件就可以知道不同參數下的效果

//進入d盤
d:
//進入工程文件夾
cd myBootstrapSass
//編譯命令
compass compile

8、刪除不需要的Bootstrap組件

將C:\Ruby23-x64\lib\ruby\gems\2.3.0\gems\bootstrap-sass-3.3.7\assets\stylesheets_bootstrap.scss複製到工程的sass文件夾下，並更名爲_bootstrap-custom.scss如下圖所示。更改style.scss中對_bootstrap的引用（自動更改了）。

_bootstrap-custom.scss 文件裏的內容

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */// Core variables and mixins
@import "bootstrap/variables";      //基本參數
@import "bootstrap/mixins";         //混合
@import "bootstrap/normalize";      //標準化樣式
@import "bootstrap/print";          //打印
@import "bootstrap/glyphicons";     //圖標
// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";           //代碼樣式
@import "bootstrap/grid";           //柵格
@import "bootstrap/tables";         //表格
@import "bootstrap/forms";          //表單
@import "bootstrap/buttons";        //按鈕
// Components
@import "bootstrap/component-animations"; //組件動畫
@import "bootstrap/dropdowns";      //下拉菜單組件
@import "bootstrap/button-groups";  //按鈕組
@import "bootstrap/input-groups";   //輸入框組
@import "bootstrap/navs";           //導航
@import "bootstrap/navbar";         //導航條
@import "bootstrap/breadcrumbs";    //麪包屑
@import "bootstrap/pagination";     //分頁導航
@import "bootstrap/pager";          //分頁頁數
@import "bootstrap/labels";         //標籤
@import "bootstrap/badges";         //徽章
@import "bootstrap/jumbotron";      //巨幕
@import "bootstrap/thumbnails";     //縮略圖
@import "bootstrap/alerts";         //警告
@import "bootstrap/progress-bars";  //進度條
@import "bootstrap/media";          //媒體
@import "bootstrap/list-group";     //列表組
@import "bootstrap/panels";         //面板
@import "bootstrap/responsive-embed"; //具有響應式內容的嵌入模塊
@import "bootstrap/wells";          //Well
@import "bootstrap/close";          //關閉按鈕
// Components w/ JavaScript
@import "bootstrap/modals";         //模態框
@import "bootstrap/tooltip";        //工具提示
@import "bootstrap/popovers";       //彈出框
@import "bootstrap/carousel";       //焦點圖組件
// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

根據自己的需求，註釋掉不需要的模塊，重新編譯就可以完成定製了

//進入d盤
d:
//進入工程文件夾
cd myBootstrapSass
//編譯命令
compass compile

9、在WebStorm裏配置Watcher

【文件(File)】-【設置(Settings)】-【工具(Tools)】-【File Watchers】-【+】-【Compass SCSS】打開New Watcher配置界面，按照下圖的值進行配置，配置完成後，只有修改scss文件，就會自動執行編譯的命令

//編譯命令
compass compile D:\myBootstrapSass

10、補充

當使用compass compile進行編譯時，會從C:\Ruby23-x64\lib\ruby\gems\2.3.0\gems調用bootstrap裏的scss相關代碼，因此工程裏不需要放源碼裏的scss文件，但是，當前增加scss文件需要調用源碼的裏方法或者變量時在Webstorm不會有智能提示，而編譯又是可以通過的，爲了有智能提示建議將C:\Ruby23-x64\lib\ruby\gems\2.3.0\gems\bootstrap-sass-3.3.7\assets\stylesheets\bootstrap文件夾複製一份到工程裏，源碼裏代碼儘量不要修改，我們自己的內容放到另外一個文件夾裏。