订阅汇聚素材网Feed

強大的Compass Sass组合写css

,Compass是一個sass的Framework,簡單的說是將原來在sass裡要寫很多次的樣式,Compass都幫你寫好了,再加一些常用的功能,並簡化了寫法,讓你寫css可以不必吹灰之力就寫出你要的效果! 呃~ 也沒這麼誇張!但速度快了不少就是!

安裝Compass
在終端機輸入以下就裝完啦!

1
2
gem update –system #先更新gem
gem install compass #安裝Compass

安裝時Compass,如果沒有安裝sass,會自動安裝。

建立Compass專案吧

1
compass creat myproject

myproject是你的專案名字

compass_creat
預設會產生如上面那些檔,接著可以在config.rb裡作設定css、sass、images等的資料夾設定,再依自已喜好吧!
接著在終端機輸入

1
compass watch

此時你就可以開始編輯你的scss檔了,編輯完存檔,compass會馬上編譯css到你設定的資料夾內,一樣可以按command + c 取消。
下次要再編輯就再watch就好

來看看有多方便吧

  1. reset
1
@import “compass/reset”;

這樣reset的css就幫你寫好了! 超方便!

  1. 常見的css3圓角
1
2
3
4
@import “compass/css3″;
.box{
@include border-radius(5px);
}

只要先import "compass/css3", 之後就可以使用所有css3 的內容,如border-radius、box-shadow、gradient…等,使用方式是@include,其實是compass幫你寫好了@mixin,你只要會用就好,而compass厲害的就是會同時幫你產生各個瀏覽器相對應的css,上面那行所產生的結果:

1
2
3
4
5
6
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

所有css都幫你產生好了,再也不用全寫了,加上寫這麼多重復的css只會更難閱讀,尤其我非常不愛css屬性重寫再重寫又斷行,搞得打開css檔來,1~2千多行! 維護真的相當累人!加上sass的特性是巢狀結構,讓整個css乾淨清楚不少!

  1. css3漸層
1
2
3
.box{
@include background(linear-gradient(lighten(red, 20%), red)); /*線性漸層*/
}

一行就搞定所有瀏覽器! 其中lighten(red, 20%)是使用sass的加亮顏色功能。

  1. inline background
1
background: inline-image(“images/fav_ico.png”) no-repeat;
1
background: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAALAgMAAADtpS7uAAAADFBMVEXnZog0czXs2ZTWSIKDRS6LVsKnx3jhohrRAj8QAAAABJRU5ErkJggg…’) no-repeat;

如果要作inline background不用像之前一樣還要自已轉base64再貼到css了,那天圖片有更新又再得重作一次,現在compass幫你作完了!

  1. Sprite我覺得…做Sprite是css designer的痛吧!維護非常費工,還要計算座標,萬一改個圖,就要座標重算!css再寫,而且改一個可能動全身!

    哇~ 現在Compass都幫你搞定啦! Compass真是太強大了,三個願望一次滿足!
    只要將要合併的圖片放在同一個資料夾下,compass會自動產生另一張合併檔,同時設定好座標。
    compass_sprite

1
2
@import “icons/*.png”;
@include all-icons-sprites; //all-後面接著的「icons」代表著是資料夾名稱
1
2
3
4
5
6
7
8
.icons-sprite,
.icons-facebook,
.icons-twitter,
.icons-yahoo { background: url(‘icons-s0859518ac7.png’) no-repeat; }
.icons-facebook { background-position: 0 0; }
.icons-twitter { background-position: 0 -32px; }
.icons-yahoo { background-position: 0 -64px; }

更多compass sprite教學及設定:
http://compass-style.org/help/tutorials/spriting/

其它還有更多功能:
http://compass-style.org/reference/compass/

debug呢?

1
2
output_style = :compressed #css壓縮設定
sass_options = {:debug_info => true} #debug

開啟config.rb設定檔,加入上面文字後,重新產生css,Firebug就可以看到該樣式是寫在那一行了,sass debug外掛安裝說明

Compass真的讓css designer輕鬆了不少,對了,目前我使用的blog Octopress也是使用Compass,這也是我想用這套blog系統的其中一個原因,寫css真的回不去了!! 下個專案改用Compass吧!

本文摘自:http://blog.visioncan.com/2011/compass-sass-your-css/

2 人Likes
  

文章转载请注明:強大的Compass Sass组合写css-汇聚素材网

本文固定链接:http://www.webhj.com/hj-2143.html  +复制链接

強大的Compass Sass组合写css:等您坐沙发呢!

发表评论

*

*

5 + 5

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍