之前有個(gè)預(yù)備篇蒲凶，如果css選擇器不是太了解的可以去看看。
先從github上clone下整個(gè)項(xiàng)目，方便研究。
首先打開stylesheets/bootstrap/_variable.scss這個(gè)文件嬉挡，我們看看這個(gè)項(xiàng)目的基礎(chǔ) 。
一開始是一組顏色的設(shè)置汇恤，是針對整個(gè)項(xiàng)目的全局變量庞钢，首先是一組常用的顏色，這個(gè)沒什么特別的因谎，但是我們注意到
$blue: #049cdb !default; //!default代表什么呢基括？
$blueDark: #0064cd !default;
我去查了文檔，文檔給出了很清晰的解釋财岔，!default讓當(dāng)前的變量擁有一個(gè)比較低的優(yōu)先級风皿，如果這個(gè)變量之前就定義過河爹，那么就使用之前的定義。文檔中還特別提醒桐款，null也會被當(dāng)成沒有定義過咸这。
順便一提!important,千萬別混起來哦。
$headingsFontFamily: inherit !default; // empty to use BS default, $baseFontFamily
使用瀏覽器默認(rèn)的樣式鲁僚，之前在想是不是inherit多此一舉炊苫？因?yàn)閏ss中父元素的樣式在大多數(shù)情況下是會自動覆蓋下來的裁厅，但是考慮到總有一些奇怪的情況冰沙，這是一個(gè)增加它比重(weight) 的一個(gè)很好的方式。當(dāng)然inherit也不是能繼承每個(gè)樣式的执虹，想了解的去查下文檔拓挥。
$tableBackground: transparent !default; // overall background-color
transparent是初始值，何必再去定義一下 ? 下面的參考資料里2號來自stackoverflow袋励，提到了這個(gè)屬性make-sense的情況：
- 不使用縮寫方式侥啤，直接定義
background-color屬性 - 使用它來覆蓋其他的樣式
并且給出了一個(gè)例子
body.foo { background-color: blue; }
body.foo.bar { background-color: transparent; }
當(dāng)然還有可讀性，防止瀏覽器bug等原因茬故，作者究竟是基于哪種考慮盖灸，我還不知道啊。
當(dāng)然我們也一定要熟悉sass所內(nèi)建的一些方法
$btnBackgroundHighlight: darken($white, 10%) !default;
$btnWarningBackground: lighten($orange, 15%) !default;
這兩個(gè)是一伙的磺芭，加深和變淺赁炎。它們是用ruby實(shí)現(xiàn)的。
def darken(color, amount)
_adjust(color, amount, :lightness, 0..100, :-, "%")
end
大家感興趣可以繼續(xù)挖掘钾腺。
$btnPrimaryBackgroundHighlight: adjust-hue($btnPrimaryBackground, 20%) !default;
還有這個(gè)徙垫，文檔中的解釋是
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.
在維持飽和度和亮度的情況下改變一個(gè)顏色的色調(diào)（有點(diǎn)繞是吧？google一下會感覺好點(diǎn)）放棒。你可以設(shè)定的值是-360~360度之間姻报。這個(gè)例子里面用的是百分比。
還有percentage方法间螟，是將數(shù)字轉(zhuǎn)換成百分比
$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
差不多把基礎(chǔ)打好了吴旋，我們休息一下繼續(xù)研究吧！
