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

總結

以上是生活随笔為你收集整理的SASS+Compass基本使用，结合JavaScript实现随机点名小系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。