bootstrap v3的变量系统是如何设置的？
变量系统是贯穿整个ui框架的重要设置，通过设置统一的变量，控制系统统一的色调、间距、响应式设置等参数。
那么，像bootstrap这样一个庞大的UI框架，是如何通过变量系统来控制的呢？那么下面我们来细品。
还是打开上一章我们下载的sass源码，
stylesheets
>
bootstrap
>
_variables.scss
_variables.scss
文件内，就是变量的设置源码。虽然这个文件不会产生任何实际样式，但是通过统一的设置和引用，它将作用到所有组件、布局及各种设置。
ps：在sass的语法中，带下划线的源码，编译之后是不会生成文件的。
下面我们重点分析部分重要变量区块的设置（因为仅变量就有875行设置～～）。
色彩变量
主体色彩设置是这样的：
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
$gray-base: #000 !default;
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
$gray-dark: lighten($gray-base, 20%) !default; // #333
$gray: lighten($gray-base, 33.5%) !default; // #555
$gray-light: lighten($gray-base, 46.7%) !default; // #777
$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
这部分设置位于整个变量系统的最前边，它定义了系统的：
- 中性色：灰色系
- 主色
- 4个状态色
一般情况下组件都会采用主色
$brand-primary
和灰色系，例如通用的字体颜色，设置的是
$gray-dark
如下：
图中可见链接（组件）颜色也是使用主色
$brand-primary
,而它的hover状态色是将
链接色:$link-color
加深15%：
darken($link-color, 15%)
。
但是并不是所有组件的色彩一定会复用主色或灰色系，依然会有部分组件单独设置特殊颜色，如下：
组件通用设置
部分组件会采用通用的设置，例如下图中，通用的圆角
$border-radius-base
、通用行高
$line-height-large
,等等～
栅格设置
bootstrap最有名的grid布局也是依靠变量进行设置的，列数、间距、响应节点、内容区宽度等，均是依赖变量设置。
媒体查询节如下：
总结
作为一个偏大的UI框架，拥有合理的变量系统是很重要的。bs包括875行的变量，来支持它所有的组件和变化。最好能自己好好看一遍~