網頁設計師的必備武器 Compass.app

22

你是網頁設計師嗎,當你寫 css 時是否常常頭暈目眩、眼神渙散、注意力無法集中呢?是否常常因為重複的原始碼搞的心情浮躁、焦慮不安?還是會為了層層結構問題落的精神崩潰、夜夜失眠的下場?沒關係,今天就要為大家介紹一款全新的必殺配備 - Compass.app 應用程式。

Compass.app 是為設計師所設計的工具,在撰寫網頁風格程式碼時,可以用較強力的 Sass 語法(是種可延伸的 CSS),來更有效率地完成工作。利用 Compass 的延伸模組,就可以不必再自行撰寫 CSS 細節,不但使得快速原型試驗(Rapid Prototyping)能更直接切中要點,也更有趣了。” - by gugod

沒~~錯!就如以上所介紹,利用 Compass.app 你能更迅速的加入所有基礎建設、更快速的套用 css3 效果、更明確的釐清你的父子結構、更簡易的加進重複性設定,而且,以前常常遇到 ie 獨有的 haslayout 或是忘了關的浮動區塊(clearfix)也不再是問題,讓你輕輕鬆鬆一行搞定。另外再告訴你一個好消息,現在購買只需要 7 塊美金,趕快訂購,欲購從速,由於沒有存貨問題晚了還是買的到。

好吧,叫賣完畢,這麼好用的工具不買是你的損失。話說回來,雖然是自家公司開發的工具,但自己寫這篇介紹時也只用 Compass.app 實做了一個小案子,以下介紹如有錯誤還請多多包涵。

備註:原生 Compass 是一套需要 Ruby 環境以及依靠指令的工具,這對視覺設計師頗具門檻,為了能跨平台以及介紹給更多設計師,所以和多將 compass 包成一套桌面的應用程式方便使用。

前置作業

Compass.app 延伸應用原理用的是 Sass,用 Dreamweaver 寫 css 的話最好先讓 Dreamweaver 看的懂 Sass。以下是 Adobe CS4 路徑
C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration\DocumentTypes
開啟 MMDocumentTypes.xml,搜尋關鍵字 css 找到 winfileextension="css" macfileextension="css",然後改成 winfileextension="css,scss" macfileextension="css,scss" 即可。(或參考 LESS/SCSS Syntax Highlighting in Dreamweaver

建立

執行 compass-app.exe 後在工具列點 compass 小圖來建立專案資料夾

此時 Compass.app 會建立應用的相關檔案並 Watching 此資料夾,Watching 的用意在於針對此資料夾的 scss 檔案進行 compile 成為 css,而 scss 就是日後編輯練功之地。


編輯 screen.scss 存檔後 Compass.app 就會自動生出 screen.css 供網頁使用

為了避免每次開新專案都要做一次個人習慣的前置作業環境,因此日後比較了解 Compass.app 後可以先建立個人的 folder,新專案開始只要複製一份進行 Watching 就可以開工了。

輔助工具

因為 sass 與 css 的程式碼行數並不對應,用 Firebug 查問題不太方便,裝了 Firesass 後就可以直接觀看 sass 原始碼找問題。

備註

  • Compass.app 源自於 Compass ,而 Compass 源自於 Sass 再加進許多強大功能而成。
  • HTML 吃的一樣還是 css,不是 scss。
  • 編輯 scss 後要存檔讓 Compass.app 進行 compile,生出 css 後頁面上才看的到結果。
  • 在 scss 中一樣可以納入一般的 css 沒問題。
  • 基本功能已很好用,比較有門檻的部分可以慢慢摸。(這句是說給自己聽的)

應用

Sass 網站有一些範例可參考,還可以對照一下同樣的風格用 sass 與 css 差別在哪裡,而 Compass 網站也有許多文件與範例,或是在這直接看幾個基本的快速入門。

核心框架(Core Framework)

Compass 提供了許多強大的框架,需要時在 scss 裡 @import 後再 @include 進 style 即可

1
2
3
4
5
6
7
@import "compass/reset";
@import "compass/css3";
 
button {
    @include border-radius(10px);
    @include box-shadow(rgba(0,0,0,0.5), 0 ,10px, 20px);
}

除了可快速套用之外,css3 方面 Compass 會自動生出對應的程式碼(-moz, -webkit, -o)符合所有瀏覽器使用,當然 IE9 之前的版本 除外。

至於要載入哪些框架全憑個人需求,Core Framework 分為幾大類,之下還有許多小分類,偷懶的可以直接 @import “compass”; 通包。另外 Compass 還提供 Blueprint,詳細內容可參閱 Compass Blueprint Module

巢狀結構(Nesting)

這應是最大特色了,巢狀結構好處是不需贅述父層名稱,讓層級複雜的結構一目瞭然直通到底。

1
2
3
4
5
6
7
8
9
10
11
12
#header {
    margin-bottom: 50px;
    h1 {
        font-size: 24px;
        color: red;
        a { display: block; }
    }
    ul.nav {
        @include clearfix;
        li { float:left; }
    }
}

另外對於偽元素也可以直接用“&”符號來取代原本的選擇器名稱

1
2
3
4
5
6
7
8
9
10
a {
    color: #000;
    text-decoration: none;
    &:visited {
        color: #red;
    }
    &:hover, &:active {
        text-decoration: underline;
    }
}

關於 “&” 的用法 hlb 還教了一個好用小技巧,因為 & = 自己,所以在 ie hack 中可以這樣寫

1
2
3
4
5
6
ul li {
    background: url(transparent.png);
    .ie6 & {
        background: #ff0000;
    }
}

ie6 不支援 png 透明圖,所以 hack 直接給背景色。另外提供一個用 sass 寫的垂直置中 demo

變數(Variables)

Sass 提供的許多函數。雖然 hlb 有大概跟我解釋了一下這部分在色彩上的妙用,但個人覺得實用的部分還是在於可一次定義網頁中的通用或標準色,或是區塊通用間距之類的,尤其在大型專案中會是管理色彩的好幫手。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$cis: #f90;
$margin: 20px;
 
#header {
  background: $cis;
}
 
a, h1, h2, h3, h4, h5 {
    color: $cis;
}
 
.section {
    padding: $margin / 2;
    margin-bottom: $margin;
}

假設企業標準色是橘色 #f90,在 header 背景色、連結、標題甚至其它地方都希望沿用,那用 "$" 定義後即可大量套用在所有希望使用該色碼的地方,如果企業突然決定改用其它顏色也不用麻煩的一個一個修改。

而 margin、padding 也可以用這種方式定義。原始碼中 “padding: $margin / 2;” 等於 20px 的 1/2 = 10px,有趣吧,只是不確定有沒有機會真的用到 XD

選擇繼承(Selector Inheritance)

相當好用可以多多益善的功能,運用得當可以省下許多工

1
2
3
4
5
6
7
8
9
10
11
12
13
.main {
    border: 1px #000;
    background: #eee;
}
.main.article {
    font-size: 13px;
    color: #333;
}
 
.sidebar {
    @extend .main;
    background: #fff;
}

運用 @extend 的方式將某一寫好的樣式直接套用進另外一組選擇器中使用,以上 scss 就會生出

1
2
3
4
5
6
7
8
9
10
11
12
.main, .sidebar {
    border: 1px #000;
    background: #eee;
}
.main.article, .sidebar.article {
    font-size: 13px;
    color: #333;
}
 
.sidebar {
    background: #fff;
}

@extend 好處是很多面的,個中滋味值得細細品嘗,在這就不一一贅述 :P

混合(Mixins)

Mixins 還沒用過,根據介紹功能有點類似變數,同樣是為了方便管理,但可定義的範圍更廣,使用方法是定義好之後再用 @include 的方式載入

1
2
3
4
5
6
7
8
9
10
11
@mixin rounded-top {
    $side: top;
    $radius: 10px;
 
    border-#{$side}-radius: $radius;
    -moz-border-radius-#{$side}: $radius;
    -webkit-border-#{$side}-radius: $radius;
}
 
#navbar li { @include rounded-top; }
#footer { @include rounded-top; }

這是 Sass 官方的範例,宣告 @mixin 後加進變數再套進圓角框,需要的再 @include 載入使用。除此之外還有更多種用法,不過看來得詳讀文件 Sass Documentation 後才能深入的靈活運用。

Sass 本身功能非常強大,但最值得推崇的是就算只略懂皮毛也可以用的呱呱叫,Compass 則是可以省下許多基礎建設的時間,網站也還有許多相當有特色的功能可以發掘, 所以快加入 Compass.app 成為更快樂的網頁設計師吧 XD

Wednesday, April 6th, 2011

Category: CSS, Compass

Bookmark and Share

22 條評論

2011/04/07

sam

我上禮拜買下單買 Compass.app 有些問題想請教
我要如何修改, Compass.app compile css 的路徑
想把 stylesheet 換成 css 或放不同路徑

還有我compile 出來的css 都會列行號對應scss,
我可以關掉或取消嗎?

2011/04/07

hlb

Sam,

你可以修改 config.rb 這個設定檔。

css_dir = “stylesheets”
sass_dir = “sass”

改成

css_dir = “css”
sass_dir = “src”

就會改成去讀 src 目錄的 sass 檔案,產生到 css 目錄。

如果在 config.rb 加上:

line_comments = false

就沒有 comment。

如果在 config.rb 加上:

output_style = :nested

就會自動 minify

2011/05/01

Kevin

你好,請問一下,Compass.app 是只適用於 Mac OS 的 Dreamweaver 上嗎?

2011/05/01

Kevin

不好意思,我找到解答了,謝謝。也期待你能分享更多資訊,感恩!

2011/05/10

eRic

請問~我修改了DW的MMDocumentTypes.xml之後仍然無法在DW中開啟.scss的檔案
是因為我使用CS5的關係嗎?
或是有其他可以編輯 scss的軟體可推薦

我的系統是Windows XP

2011/05/10

eRic

對了 錯誤訊息是”無法找到正確的編輯程式來編輯這個副檔名”

2011/05/11

eric

另外…在我家的電腦使用則是點了Compass.app都沒反應…

2011/05/11

eric

不好意思 剛剛試了又有反應了,但仍然無法在CS5底下編輯

2011/05/11

underfire

hello, CS5 改完 MMDocumentTypes.xml 應該會是
documenttype id=”CSS” internaltype=”Text” winfileextension=”css,scss” macfileextension=”css,scss” file=”Default.css” writebyteordermark=”false” mimetype=”text/css”
請確認看看是否正確

2011/05/12

eric

我的確是照你們說的修改
後來發現只要先右鍵點檔案設定永遠使用DW開啟就可以在DW裡面開了
謝謝

2011/07/25

kilocooper

請問一下,用dw編輯scss可以有顏色的設定嗎?!

2011/07/25

underfire

可能得去 adobe 找看看
這篇不知道有沒有說明 http://kb2.adobe.com/cps/164/tn_16410.html

2012/01/20

lisa

請問一下沒有信用卡怎麼跟你們購買??因為我也無法註冊>”<~~~

2012/01/20

underfire

Lisa PayPal 無法註冊?

2012/01/20

Lisa

因為我到這頁要買,可是我沒信用卡的說~~那我該怎麼支付呢??

http://transactions.digitaldeliveryapp.com/packages/16/purchase

2012/01/20

underfire

Lisa: 借一下? XD
很抱歉目前只能提供 paypal 線上刷卡付款 :(

2012/01/26

lisa

啊咧……

難道沒有別的方式了/___\……..

像是轉帳或是面交之類的?

因為我還是學生辦信用卡很麻煩的說…..

好討厭…….冏rz………

2012/01/28

underfire

留個真正的email信箱給我?

2012/05/15

iris

我習慣用Dreamweaver 寫網頁,因為不論是 html 碼或是css 都會有提示,可是 compass 在 Dreamweaver 上面使用似乎無法出現提示,要怎麼樣才能在 Dreamweaver 上面使用可以出現提示呢?

2012/05/15

underfire

前置作業部分有提到讓 Dreamweaver 看懂 scss 的方法, 照著做就可以了, 我這邊測試 Dreamweaver cs4 或 Dreamweaver cs5 都沒問題喔~

2013/09/05

wired seiko

seiko wired