Sass项目中定制bootstrap

前提条件 :

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

安装ruby注意：

è¿éåå¾çæè¿°

安装sass：gem install sass

安装conpass：gem install compass

检验是否安装成功：ruby -v gem -v sass -v compass -v

一. 前提条件完成后，安装bootstrap-sass插件：gem install bootstrap-sass

安装完插件后可在ruby的安装目录下看到插件：

二. 新建应用该插件的项目：compass create 【自己的项目名称】 -r bootstrap-sass --using bootstrap

项目结构及styles.scss内容如下：

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

三. 定置化bootstrap：

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

@import 'bootstrap-custom';

然后修改 _bootstrap-custom.scss 可以根据自己的需要取舍相应的 bootstrap模块

_bootstrap-variables.sass 是 bootstrap 的变量文件，可以修改其中的变量，制定自己的样式大小与颜色（针对于bootstrap中的-variables.sass默认颜色配置）。

_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";                     //方法，函数模块

// Reset and dependencies
@import "bootstrap/normalize";                  //重置样式模块
@import "bootstrap/print";                      //打印样式模块
@import "bootstrap/glyphicons";                 //图标模块

// Core CSS
@import "bootstrap/scaffolding";                //脚手架：主要是对body，html等标签进行定制化的reset
@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";           //自适应工具模块

根据自己的项目的实际需要，对模块进行取舍，不需要的模块注释掉，对默认的变量进行修改，这样你得到的 boostrap就是一个你制定的规则样式

补充：

当使用compass compile进行编译时，会从ruby安装目录中安装的boot-sass插件中调用bootstrap里的scss相关代码，因此工程里不需要放源码里的scss文件，但是，当前增加scss文件需要调用源码的里方法或者变量时不会有智能提示，而编译又是可以通过的，为了有智能提示建议将bootstrap-sass-3.3.7\assets\stylesheets\bootstrap文件夹复制一份到工程里，源码里代码尽量不要修改，我们自己的内容放到另外一个文件夹里。
这里写图片描述

bootstrap-sass插件说明：

核心文件组织结构：

bootstarp
|--Core variables and mixins     //核心参数和混入（类似函数）
    |-- variables                //核心参数设置
    |-- mixins                   //各种混入

|--Reset and dependencies        //页面重置和依赖
    |-- normalize                //https://github.com/necolas/normalize.css
    |-- print                    //打印格式化
    |-- glyphicons               //http://glyphicons.com/

|--Core CSS                      //核心组件
    |-- scaffolding              //脚手架：主要是对body，html等标签进行定制化的reset
    |-- type                     //排版相关
    |-- code                     //代码相关
    |-- grid                     //栅格系统
    |-- tables                   //表格相关
    |-- forms                    //表单相关
    |-- buttons                  //按钮相关

|--Components                    //组件
    |-- component-animations     //组件的淡出等动画
    |-- dropdowns                //点击下拉菜单组件
    |-- button-groups            //按钮组
    |-- input-groups             //表单输入组
    |-- navs                     //导航
    |-- navbar                   //导航条
    |-- breadcrumbs              //面包屑
    |-- pagination               //分页页码
    |-- pager                    //上一页下一页分页
    |-- labels                   //标签
    |-- badges                   //徽章
    |-- jumbotron                //超大屏
    |-- thumbnails               //缩略图
    |-- alerts                   //警告
    |-- progress-bars            //进度条
    |-- media                    //多媒体对象
    |-- list-group               //列表组
    |-- panels                   //面板(容器)
    |-- responsive-embed         //响应式嵌入
    |-- wells                    //一种会引起内容凹陷显示或插图效果的容器
    |-- close                    //关闭按钮

|--Components w/ JavaScript      //需要与js交互的组件
    |-- modals                   //模态框
    |-- tooltip                  //工具提示
    |-- popovers                 //弹出框
    |-- carousel                 //轮播

|--Utility classes               //工具类
    |-- utilities                //普通工具，如清除浮动等
    |-- responsive-utilities     //响应式布局相关

Sass项目中定制bootstrap

核心文件组织结构：

猜你喜欢