sass,compass讓開發效率飛起

最近開始學習而且使用，發現使用它寫起css來真的是各類爽

安裝sass，compass

1. sass是依賴於ruby的，必須先安裝Ruby，點擊下載
2. 下載完ruby以後，使用命令行安裝sass        gem install sass
3. 使用命令，sass-v    compass-v   查看是否安裝成功

   

　　　出現上圖狀況則爲安裝成功

---

 

sass的使用及優勢

• sass官網： http://www.w3cplus.com/sassguide/
• api文檔   http://sass-lang.com/documentation/file.SASS_REFERENCE.html
• sass功能：

定義變量,數值計算（左邊爲scss文件，右邊爲編譯以後的css文件）

方便知道誰是誰的子元素，沒必要寫一大堆重複的標籤

還能夠像函數同樣使用，能夠傳參數，能夠設置默認參數

這還遠遠不夠，若是sass不和compass一塊兒使用，很難體現它功能的強大性

compass的使用

1.官方文檔 http://compass-style.org/help/tutorials/production-css/

2.compass的特性

• 輕鬆實現瀏覽器兼容
• 全面支持css3
• 提供海量使用功能，顏色處理，獲取客戶端數據等
• 輕鬆實現擴展

3.經常使用功能：

 1.@import（合併css文件，實現模塊化）

能夠將項目中的各部分樣式拆分紅 _head.scss,_body.scss,_foot.scss    (注意！要以_開頭，這樣子這些文件便不會被編譯成css文件)

實現效果

使用方法，在main.scss中，加入如下代碼

1 @import "base/head";
2 @import "base/body"; 
3 @import "base/foot";

執行編譯，便可實現

2.css3兼容性

      

無需每次都重複寫多個瀏覽器前綴，只需在前面寫上 @include  （這裏用正常的css3方式寫）

3.合併雪碧圖

說明：CSS雪碧圖是將幾個圖片拼合成一張圖片，以此來減小HTTP請求的方法，而且能夠提高網站加載速度

目錄結構以下：share目錄下放未經合併的圖片，在images目錄下的圖片即爲合併以後的圖片

使用方法：

在share.scss中輸入如下3行代碼

1 @import "compass/utilities/sprites";   
2 @import "share/*.png";   　　　　//注意這裏的路徑，*表示匹配全部png格式的圖片
3 @include all-share-sprites;   //中間的share爲存放未合併文件的目錄名字，

再執行編譯便可，效果圖以下，隨便測試的，有點醜嘿嘿

而且，在share.css文件中，還將圖片的位置都計算好了，使用起來很是的方便，以下

出現過的bug：

1 error sass/screen.sccc (c:/Ruby22-x64/lib/ruby/gems/2.2.0/compass-1.0.3/lib/compass/sass_extensions/functions/sprite.rb:137:in 'sprite_does_not_have_parent':undefined 'parent' for nil:NilClass)

解決方法：    圖片名字，不要有數字，中文之類的

4.瀏覽器Normalize.css（解決各類瀏覽器樣式不統一的問題）

（1）說明：Normalize.css是一種CSS reset的替代方案。

（2）優勢：

• 保護有用的瀏覽器默認樣式而不是徹底去掉它們
• 通常化的樣式：爲大部分HTML元素提供
• 修復瀏覽器自身的bug並保證各瀏覽器的一致性
• 優化CSS可用性：用一些小技巧
• 解釋代碼：用註釋和詳細的文檔來

（3）官方文檔 https://github.com/ksmandersen/compass-normalize

（4）安裝    gem install compass-normalize

（5）使用方法

• 新建立一個項目

compass create <my_project> -r compass-normalize --using compass-normalize

• 在已經存在的項目添加

在config.rb 中添加    require'compass-normalize'

• 使用規範化的插件，只須要引入     @import "normalize"; //這個爲所有引入

　正常狀況下是選擇須要的模塊，單獨引入，防止代碼冗餘，以下

1 @import 'normalize/html5';
2 @import 'normalize/base';
3 @import 'normalize/links';
4 @import 'normalize/typography';
5 @import 'normalize/embeds';
6 @import 'normalize/groups';
7 @import 'normalize/forms';
8 @import 'normalize/tables';

scss編譯，compass編譯

 說了這麼多，還差編譯

1.使用可視化工具編譯      例如：koala   （實時編譯，可壓縮，支持多語言，使用簡單）

下載地址，點擊下載

2.使用命令行

建立一個工程       compass create myproject  點擊進入建立的目錄，出現如下3個文件

 編譯   　　　　　compass compile   （在項目根目錄下使用，將sass目錄中的文件編譯成css，css的路徑爲在config.rb配置的css-dir）

經常使用命令行以下

3.使用前端自動化工具 gulp  

（接下來會寫一篇gulp的文章，未完待續）