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

Ionic学习笔记二 Scss配置

关于scss安装方式,参见文章 : http://blog.csdn.net/xundh/article/details/47605515scss位置ionic/scss/ionic.app.scs...
  • xundh
  • xundh
  • 2015年08月15日 15:05
  • 5877

bootstrap-variables.scss

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

sass @import 规则

@import 根据文件名引入。 默认情况下,它会寻找 Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import 规则: 如果文件的扩展名是 .css。如果文...
  • JASMINECJC
  • JASMINECJC
  • 2016年02月28日 15:10
  • 5753

SASS(SCSS)学习及其在ionic中的应用

1) Scss简介: 官网:http://sass-lang.com/ 学习网站:http://www.w3cplus.com/sassguide/ CSS with superpowers Sas...
  • ioniconline
  • ioniconline
  • 2015年12月03日 16:18
  • 4597

Sass学习之快速上手bootstrap-sass

Sass学习之快速上手bootstrap-sass
  • Willerfu
  • Willerfu
  • 2016年06月22日 15:33
  • 4501

bootstrap 不得不说的sass

你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费...
  • huangbin10025
  • huangbin10025
  • 2014年04月10日 20:16
  • 1855

bootstrap-sass_源码解析四:Utility

前三节中我们已经讲了Bootstrap-sass的结构,常量的提取,以及混入的定义。没有什么难度,或许自己看源码来得更加清晰。但是我写这篇文章的目的在这里声明下,主要是...
  • m1213642578
  • m1213642578
  • 2016年09月01日 12:15
  • 747

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

前言之前已经完成了编译BoostrapV3 Less版本源码编译,按照官方的流程走可以了。由于V4版本是基于Sass的,因此有必要提前做好技术储备,尝试一下BoostrapV3 Sass版本源码的编译...
  • lhtzbj12
  • lhtzbj12
  • 2017年02月15日 21:23
  • 695

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

上节主要看了下bootstrap这个文件的内容,对boostrap的整个组织架构有了一个全局上的了解。下面我们针对几个主要文件进行解析。...
  • m1213642578
  • m1213642578
  • 2016年08月30日 10:48
  • 1373

管理Sass项目文件结构

本文由大漠根据Hugo Giraudel的《Architecture for a Sass Project》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转...
  • kaosini
  • kaosini
  • 2014年10月30日 10:00
  • 732
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap-Sass 源码解析二:Variables.scss
举报原因:
原因补充:

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