SASS+Compass基本使用，結合JavaScript實現隨機點名小系統

SASS+Compass基本使用，以一個隨機點名demo爲例
demo 源碼：https://github.com/XieTongXue/call-over，效果請看(5)，代碼解釋請看源碼。
（1）SASS、Compass是什麼？爲什麼要用它？
SASS是一種“CSS預處理器”，是一款強化CSS的輔助工具，在CSS語法基礎上增加了變量(variables)、嵌套(nested rules)、混合(mixins)等高級功能，使得CSS更強大。
Compass是一個Sass的樣式庫，有助於更好地組織管理樣式文件，使得開發更高效。
（2）SASS、Compass安裝
sass基於Ruby語言開發，安裝sass前需要安裝ruby，mac自帶ruby，不需要重新安裝
安裝過程可參考：https://blog.csdn.net/sanchan/article/details/47751401
安裝成功測試：

（3）使用創建compass項目

創建出的目錄如下

（4）sass編譯與css文件的引用
進入項目根目錄，運行compass compile, 會將sass子目錄中的.scss文件編譯成.css文件，保存在stylesheets子目錄中，新建html文件引入其中的css文件即可。
index.html源碼：

style.scss源碼：

運行compass compile後的項目目錄

style.css源碼及解釋：

這部分是由於引入了compass的reset模塊，此模塊的作用是重置瀏覽器的默認屬性，使元素不設置樣式時在各個瀏覽器下也顯示同樣的效果。

這部分是因爲引入了compass的css3模塊並使用了圓角功能，使用@include border-radius(50%)後，compass會在編譯時自動生成兼容各大瀏覽器的代碼。
簡單demo運行效果：

（5）SASS+Compass稍微複雜一些的demo實現
demo功能：隨機點名
實現效果：

源碼地址：https://github.com/XieTongXue/call-over