之前有个预备篇，如果css选择器不是太了解的可以去看看。
先从github上clone下整个项目，方便研究。
首先打开stylesheets/bootstrap/_variable.scss这个文件，我们看看这个项目的基础 。
一开始是一组颜色的设置，是针对整个项目的全局变量，首先是一组常用的颜色，这个没什么特别的，但是我们注意到
$blue: #049cdb !default; //!default代表什么呢？
$blueDark: #0064cd !default;
我去查了文档，文档给出了很清晰的解释，!default让当前的变量拥有一个比较低的优先级，如果这个变量之前就定义过，那么就使用之前的定义。文档中还特别提醒，null也会被当成没有定义过。
顺便一提!important,千万别混起来哦。
$headingsFontFamily: inherit !default; // empty to use BS default, $baseFontFamily
使用浏览器默认的样式，之前在想是不是inherit多此一举？因为css中父元素的样式在大多数情况下是会自动覆盖下来的，但是考虑到总有一些奇怪的情况，这是一个增加它比重(weight) 的一个很好的方式。当然inherit也不是能继承每个样式的，想了解的去查下文档。
$tableBackground: transparent !default; // overall background-color
transparent是初始值，何必再去定义一下 ? 下面的参考资料里2号来自stackoverflow，提到了这个属性make-sense的情况：
- 不使用缩写方式，直接定义
background-color属性 - 使用它来覆盖其他的样式
并且给出了一个例子
body.foo { background-color: blue; }
body.foo.bar { background-color: transparent; }
当然还有可读性，防止浏览器bug等原因，作者究竟是基于哪种考虑，我还不知道啊。
当然我们也一定要熟悉sass所内建的一些方法
$btnBackgroundHighlight: darken($white, 10%) !default;
$btnWarningBackground: lighten($orange, 15%) !default;
这两个是一伙的，加深和变浅。它们是用ruby实现的。
def darken(color, amount)
_adjust(color, amount, :lightness, 0..100, :-, "%")
end
大家感兴趣可以继续挖掘。
$btnPrimaryBackgroundHighlight: adjust-hue($btnPrimaryBackground, 20%) !default;
还有这个，文档中的解释是
Changes the hue of a color while retaining the lightness and saturation. Takes a color and a number of degrees (usually between -360deg and 360deg), and returns a color with the hue rotated by that value.
在维持饱和度和亮度的情况下改变一个颜色的色调（有点绕是吧？google一下会感觉好点）。你可以设定的值是-360~360度之间。这个例子里面用的是百分比。
还有percentage方法，是将数字转换成百分比
$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth) !default;
它的源代码也挺易懂的
# File '/var/www/sass-pages/.sass/lib/sass/script/functions.rb', line 1158
def percentage(value)
unless value.is_a?(Sass::Script::Number) && value.unitless?
raise ArgumentError.new("#{value.inspect} is not a unitless number")
end
Sass::Script::Number.new(value.value * 100, ['%'])
end
差不多把基础打好了，我们休息一下继续研究吧！
