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的文章,未完待續)


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com