CSS——sass & compass

好的代碼習慣：應該是註釋佔用整個篇幅的2/3。

 

慕課網學習筆記：（http://www.imooc.com/learn/364）

1.理論基礎：

sass_Syntactically Awesome StyleSheets

sass如同錘子，compass如同錘子，而css如同錘子和釘子完美應用的產品。

sass和compass的好處：

• 使用sass和compass能夠寫出更優秀的css；
• 解決css編寫過程當中的痛點問題，如精靈圖合圖問題；
• 有效組織樣式、圖片、字體等項目元素。

2.sass的安裝和命令行使用

》簡介：

官網：http://sass-lang.com/

.sass ->類ruby語法

.scss ->類css語法，3.0之後

》安裝

安裝ruby環境 www.ruby-lang.org/en/

安裝rvm　　rvm.io

安裝gpg2　　使用brew安裝(cakebrew)

安裝好ruby後：

gem install sass (--version=3.3.0)

》sass編譯，可是通常不使用sass編譯，通常使用compass。

sass xxx.scss xxx.css

》compass compass-style.org

compass is an open-source CSS Authoring Framework.　　是一個開源的css書寫工具

mixin 相似函數

>安裝compass（須要root權限，寫入資源庫文件）

sudo gem install compass

>建立目錄，而後建立項目（最後一個參數是項目名稱）

compass create learn-compass-init

回顯的最後一段話：

_開頭的文件是局部文件，不會單獨生成css文件，用於被其餘文件引入；

config.rb文件用於配置項目；

compass compile （當前路徑下直接執行便可，也能夠加上文件路徑）

compass watch （監聽項目中的改變並自動編譯）

》sass將scss和sass文件進行轉換

sass-convert main.scss main.sass

 

2.Sass語法介紹-基礎篇

目標頁面：

1》字體：使用@import引入_文件實現：

compass 使用插件機制引入normalize 來替換reset 

2》compass繼承了css的import機制，可是進行了進一步優化，只有在如下4種狀況下會使用css原生的import機制

compass的import優化機制：

注意：有下劃線和沒有下劃線可認爲同名，不容許。 引入_文件時能夠不寫_

3》註釋。項目結構：

4》類別嵌套形式，注意:hover要添加&，這樣才能在css去掉默認的空格

 也支持屬性嵌套

生成的css文件：

 

進階篇和高階篇暫不學習，等實際應用上再學習，不然也會忘掉。