三、bootstrap v3的变量系统是如何设置的？

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行的变量，来支持它所有的组件和变化。最好能自己好好看一遍~