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中，加入以下代碼

@import "base/head";
@import "base/body"; 
@import "base/foot";

執行編譯，即可實現

2.css3兼容性

      

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

3.合並雪碧圖

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

目錄結構如下：share目錄下放未經合並的圖片，在images目錄下的圖片即為合並之后的圖片

使用方法：

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

@import "compass/utilities/sprites";   
@import "share/*.png";   　　　　//注意這里的路徑，*表示匹配所有png格式的圖片
@include all-share-sprites;   //中間的share為存放未合並文件的目錄名字，

再執行編譯即可，效果圖如下，隨便測試的，有點丑嘿嘿

並且，在share.css文件中，還將圖片的位置都計算好了，使用起來非常的方便，如下

出現過的bug：

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"; //這個為全部引入

　正常情況下是選擇需要的模塊，單獨引入，防止代碼冗余，如下

@import 'normalize/html5';
@import 'normalize/base';
@import 'normalize/links';
@import 'normalize/typography';
@import 'normalize/embeds';
@import 'normalize/groups';
@import 'normalize/forms';
@import 'normalize/tables';

scss編譯，compass編譯

 說了這么多，還差編譯

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

下載地址，點擊下載

2.使用命令行

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

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

常用命令行如下

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

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