Sass学习之快速上手bootstrap-sass

最新推荐文章于 2024-05-14 19:50:50 发布

路边有个胖子

最新推荐文章于 2024-05-14 19:50:50 发布

阅读量8.7k

点赞数 5

文章标签： bootstrap compass sass

本文链接：https://blog.csdn.net/Willerfu/article/details/51734672

版权

Sass 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Sass学习之快速上手bootstrap-sass

前提条件 :

已安装 Ruby
已经安装 Sass
已经安装 Compass

满足以上条件，你就可以很愉快的为你的项目引进 bootstrap-sass，如果你还没有安装，那你需要按条件的顺序，依次进行安装 Ruby，Sass 和 compass 在你的电脑上，具体的安装过程，可以去找度娘，都是很简单的。

话不多说，我们准备开始引入 bootstrap-sass

1. 打开命令行，输入如下命令：（这里我自己用的命令行软件是 Cmder，功能完全玩爆window自带的 cmd ，感兴趣的小伙伴可以去百度搜索下载）

gem install bootstrap-sass

然后回车，就会进行 bootstrap-sass插件的安装，安装的路径是在你 Ruby 的安装目录下
这里写图片描述

至于它里面的内容，自己可以去看，其实就是一个 boostrap 的 Sass 源码项目

2. 成功安装好 bootstrap-sass 后，我们新创建一个使用 bootstrap-sass 的项目，命令行输入：

compass create my-new-project -r bootstrap-sass --using bootstrap

其中 my-new-project 是你的项目名称，叫什么名字随便你喜欢，这里我自己创建的项目是放在D盘下的 code 文件夹内，你可以用 cd 命令跳转到你需要的盘符下的文件夹内进行项目创建

这里写图片描述

如图，回车以后，项目开始创建，我们可以去你创建项目的路径下查看

这里写图片描述

需要注意的是你创建完后，在你创建项目的路径下还生成了一个文件夹

这里写图片描述

你可以像我一样把它放到项目文件夹下，也可以删除，都不会影响项目。

3 . 终于到了最激动的时刻，就是导入项目到编辑器，进行使用

这里写图片描述

在 styles.scss 文件中我们可以看到项目已经引入了 bootstrap-sass，其中 @import “bootstrap” 表示 全部的bootstrap的模块 被引入，为了制定化bootstrap，我们往往只引入我们需要的 bootstrap模块 进行源码修改，所以这里我们需要重新修改

1. 定制化：拷贝_bootstrap.scss 内容为你项目 my-new-project/sass/_bootstrap-custom.scss （也就是新建一个_bootstrap-custom.scss 文件，内容是_bootstrap.scss 里的内容）
2. 修改：my-new-project/sass/styles.scss 中的 @import ‘bootstrap’ 为如下：

@import 'bootstrap-custom';

这里写图片描述

然后修改 _bootstrap-custom.scss 可以根据自己的需要取舍相应的 bootstrap模块，_bootstrap-variables.sass 是 bootstrap 的变量文件，可以修改其中的变量，制定自己的样式大小与颜色。

_bootstrap-custom.scss 文件内容

/*!
 * Bootstrap v3.3.6 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "bootstrap/variables";                  //变量模块
@import "bootstrap/mixins";                     //方法，函数模块

// Reset and dependencies
@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";                       //carousel模块

// Utility classes                          
@import "bootstrap/utilities";                      //工具模块
@import "bootstrap/responsive-utilities";           //自适应工具模块