编译BoostrapV3 Sass版本的源码（涉及Ruby、Sass、Compass、Watcher的配置）

╰+哭是因爲堅強的太久メ 2021-09-11 07:06 294阅读 0赞

# 前言 #

之前已经完成了编译BoostrapV3 Less版本源码编译，按照官方的流程走可以了。由于V4版本是基于Sass的，因此有必要提前做好技术储备，尝试一下BoostrapV3 Sass版本源码的编译。

# 开始动手 #

## 1、安装Ruby ##

下载rubyinstaller-2.3.3-x64.exe 安装（从官网下载，或者从这里链接：[http://pan.baidu.com/s/1o7BxbR0][http_pan.baidu.com_s_1o7BxbR0] 密码：rctf），注意，安装过程中下面的设置。  
![这里写图片描述][SouthEast]  
安装完成后用命令检查是否安装成功，成功会显示版本信息。

ruby -v
    gem -v

![这里写图片描述][SouthEast 1]

## 2、安装Sass ##

gem install sass

安装完后，C:\\Ruby23-x64\\bin里将有下面的文件。  
![这里写图片描述][SouthEast 2]

## 3、安装compass ##

gem install compass

查看compass版本  
![这里写图片描述][SouthEast 3]

## 4、引入bootstrap-sass ##

gem install bootstrap-sass

查看下面目录里的文件（目录为C:\\Ruby23-x64\\lib\\ruby\\gems\\2.3.0\\gems）,记住这个目录，后面会经常用到，bootstrap-sass-3.3.7文件夹下的内容就是官方提供的开源项目的源码。  
![这里写图片描述][SouthEast 4]

## 5、创建我们自己的基于Bootstrap Sass的项目 ##

需要定位到我们将要创建项目的路径，比如d盘根目录，新项目名称为 myBootstrapSass，命令如下

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

创建成功，会出现下面的提示，同时d盘根目录出现 myBootstrapSass文件夹。  
![这里写图片描述][SouthEast 5]

## 6、不做任何修改直接编译 ##

//进入工程文件夹
    cd myBootstrapSass
    //编译命令
    compass compile

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

## 7、修改参数进行定制 ##

笔者习惯用Webstorm打开项目，如下。  
![这里写图片描述][SouthEast 6]  
\_bootstrap-variables.scss里就是基本的样式参数，需要改什么值，将前的注释去掉，重新编译即可。  
config.rb里可以修改生成style.css的格式，例如要修改output\_style,将output\_style前的\#去掉，output\_style的值与sass命令-t的值一致，就是前面加了冒号

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:expanded</td> 
   <td>全部展开，无缩进</td> 
  </tr> 
  <tr> 
   <td>:nested</td> 
   <td>全部展开，有缩进</td> 
  </tr> 
  <tr> 
   <td>:compact</td> 
   <td>一行显示</td> 
  </tr> 
  <tr> 
   <td>:compressed</td> 
   <td>压缩后</td> 
  </tr> 
 </tbody> 
</table>

另外，生成的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的引用（自动更改了）。  
![这里写图片描述][SouthEast 7]  
\_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

![这里写图片描述][SouthEast 8]

## 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文件夹复制一份到工程里，源码里代码尽量不要修改，我们自己的内容放到另外一个文件夹里。  
![这里写图片描述][SouthEast 9]

[http_pan.baidu.com_s_1o7BxbR0]: http://pan.baidu.com/s/1o7BxbR0
[SouthEast]: /images/20210809/589666a799f143c6ae4dbb62e261eda1.png
[SouthEast 1]: /images/20210809/df41031c6c534d85b38a302be8f75345.png
[SouthEast 2]: /images/20210809/ed85dd442b434f68a77c9c398728d573.png
[SouthEast 3]: /images/20210809/fd423387b2a8488f8f22b15e89b6bf2a.png
[SouthEast 4]: /images/20210809/fb772a7818fd44ea84257fe7d0ea73ca.png
[SouthEast 5]: /images/20210809/745618dddd6e47e6a54448b4fb9cedeb.png
[SouthEast 6]: /images/20210809/62a68b41f41f4a1c8ddc5bfb372dd6f2.png
[SouthEast 7]: /images/20210809/2a2639ed4f51483ab9b41f82dd32afae.png
[SouthEast 8]: /images/20210809/a65c2682015b42829209d5dbb0ff4558.png
[SouthEast 9]: /images/20210809/ba627d1ca4f347099ae807d28313ae6c.png