编译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文件夹复制一份到工程里，源码里代码尽量不要修改，我们自己的内容放到另外一个文件夹里。