之前有個預備篇，如果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
差不多把基礎打好了，我們休息一下繼續研究吧！
