Bootstrap-Sass 源码解析二:Variables.scss

原创 2016年08月30日 10:48:40

上节主要看了下bootstrap这个文件的内容,对boostrap的整个组织架构有了一个全局上的了解。下面我们针对几个主要文件进行解析。

首先是Variables.scss。

作用

作用很直观啊,就是对整个bootstrap,进行了常量的提取,类似于配置项。在我们对bootstrap进行定制化开发时,我们只需要修改其中的参数就可以完成相应的修改,十分方便快捷。

内容

总体来看,个人认为就分成两部分,一部分是核心配置项,另一部分是针对每个组件的配置项。没什么难点,直接罗列其组织结构。

核心配置项

|-- Colors                      //定义了灰度和徽章的颜色
|-- Scaffolding                 //脚手架,一些全局样式
|-- Typography                  //排版样式
|-- Iconography                 //图标配置
|-- Components                  //各组件的padding,border等公共设置
|-- Z-index master list         //各组件的z-index排列顺序
|-- Media queries breakpoints   //响应式布局中媒体的大中小划分点
|-- Grid system                 //栅格系统
|-- Container sizes             //container在不同尺寸屏幕中的最大宽度
|-- Form states and alerts      //Form和alerts的状态配置

组件配置

|-- tables                   //表格相关
|-- buttons                  //按钮相关
|-- forms                    //表单相关
|-- dropdowns                //点击下拉菜单组件
|-- navbar                   //导航条
|-- navs                     //导航
|-- pagination               //分页页码
|-- pager                    //上一页下一页分页
|-- jumbotron                //超大屏
|-- tooltip                  //工具提示
|-- popovers                 //弹出框
|-- labels                   //标签
|-- modals                   //模态框
|-- alerts                   //警告
|-- progress-bars            //进度条
|-- list-group               //列表组
|-- panels                   //面板(容器)
|-- thumbnails               //缩略图
|-- wells                    //一种会引起内容凹陷显示或插图效果的容器
|-- badges                   //徽章
|-- breadcrumbs              //面包屑
|-- carousel                 //轮播
|-- close                    //关闭按钮
|-- type                     //排版相关
|-- code                     //代码相关

参考理论

看到这里我看到了很多OOCSS,SMACSS,BEM的影子,可能bootstrap在开发的过程中参考了一些相关理论基础。这里附上链接帮助大家理解。

http://www.w3cplus.com/css/css-sass-scss-compass-less-bem-smacss-oocss-acss-ccss-wtfss.html

Sass学习之快速上手bootstrap-sass

Sass学习之快速上手bootstrap-sass

Bootstrap-sass<1> 安装与基本结构

最近项目都在用bootstrap布局,每次改动和文件组织总感觉不是那么清晰明了,所以借着该项目,重新整理一下sass,在网上发现有bootstrap-sass,已经集成好的一个bootstrap的sa...
  • GitMind
  • GitMind
  • 2016年08月20日 15:25
  • 2293

bootstrap-sass安装使用

bootstrap-sass compass with not rails

bootstrap-variables.scss

  • 2015年04月07日 03:24
  • 27KB
  • 下载

Bootstrap-Sass 源码解析一:文件组织架构

Bootstrap-Sass 源码解析

Bootstrap-Sass 源码解析三:Mixins

mixin在sass的语法中是混入的意思,可以传递参数,类似与函数的意思。这里的mixins.scss自然就是定义了一系列混入库,供bootstrap各组件样式调用。下面根据mixinx.less为目...

Sass/Scss基础——rem与px的自动转换

Sass/Scss中rem的使用 在CSS中,实现px和rem转换非常简单,但每次使用都需进行计算。虽然在html中设置font-size:62.5%即16px*62.5%=10px;会给大家带来...
  • ITYang_
  • ITYang_
  • 2017年03月18日 21:06
  • 4188

InspiniaAdmin 2.6.1 PDF_LESS_SASS_SCSS

  • 2016年09月29日 15:50
  • 29.47MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap-Sass 源码解析二:Variables.scss
举报原因:
原因补充:

(最多只允许输入30个字)