sass&compass重写css

最近开始在尝试开始使用Sass来写CSS代码,刚开始虽然还是不太习惯用链式的方式写css,不过这是暂时的阶段。

如果你还不了解Sass,可以看之前发表过的文章来http://caibaojian.com/sass-less-stylus.html,Sass主要有下面这几种特性(主要内容来自这里)

左邊為原始scss檔,右邊為編譯過後的:
1.Variables 变量
使用$作為開頭當參數

2.Nesting 
很清楚的知道 谁是誰的子元素,不用像以前一樣 写一大排重复的开头了


3.Mixins 
其實就像function一樣使用,還可以帶參數


4.Inheritance 繼承




1.@import
可以將網站的各部份樣式拆開成_head.scss_body.scss_foot.scss放置在base資料夾下,可利用@import功能把3個檔納入到main.css裡 



3.顏色功能

lighten(red, 50%) //增亮50% darken(blue, 50%) //變暗50%
更多见:http://sass-lang.com/documentation/Sass/Script/Functions.html?utm_source=caibaojian.com

更换css样式:http://sass-lang.com/documentation/file.SASS_REFERENCE.html?utm_source=caibaojian.com#id15

以expanded壓縮方式

sass --watch --style expanded style.scss:style.css

原文链接:http://caibaojian.com/use-sass-compass-write-css.html

編譯出來的css:

#main { color: #fff; background-color: #000; } #main p { width: 10em; } ...

以compressed壓縮方式·

//code from http://caibaojian.com/use-sass-compass-write-css.html
sass --watch --style compressed style.scss:style.css

編譯出來的css:

#main{color:#fff;background-color:#000}#main p{width:10em}...

原文链接: http://caibaojian.com/use-sass-compass-write-css.html

要debug怎麼辨?·

1.Firefox裝FireSass for Firebug:https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/?utm_source=caibaojian.com

原文链接: http://caibaojian.com/use-sass-compass-write-css.html

2.重新編譯·

sass --watch --debug-info style.scss:style.css #開啟debug模式 (記得要先刪原本編譯出的css)

之後在Firebug裡就可以看見啦 

還有線上可以直接測試:http://sass-lang.com/try.html?utm_source=caibaojian.com

其實sass/scss只是利於編寫css而產生的一個語言,但今天要寫符合各瀏覽器前綴詞的css,你還是得自已寫@maxin-moz-webkit-o-ms寫起來,如果遇到要寫css3的gradient呢? 又要可以改參數呢? 那會瘋掉! 因為我寫過,後來就放棄了! 因為有個更強大的Compass來幫忙! 來看看Compass有多厲害!

首先,当然是安装Compass,

gem update --system #先更新 gem gem install compass #安裝Compass 

建立Compass项目

compass creat myproject

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

compass watch

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

来看看Compass有哪些方便的地方

reset css

@import "compass/reset"; 

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

常見的css3圓角

@import "compass/css3"; .box{ @include border-radius(5px); } 

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

 -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乾淨清楚不少!

css3漸層

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

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

Sprite

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

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

@import "icons/*.png"; @include all-icons-sprites; //all-後面接著的「icons」代表著是資料夾名稱 
.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; } 
原文链接: http://caibaojian.com/use-sass-compass-write-css.html

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

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

debug呢?

//code from http://caibaojian.com/use-sass-compass-write-css.html
output_style = :compressed #css壓縮設定 sass_options = {:debug_info => true} #debug 

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

Sass & Compass投影片介紹

來看看這份相當詳細又實用的投影片介紹吧!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值