sass

Scss旅程(5) – compass指令介紹

在正式建立compass專案前,先介紹一下compass的指令。compass可使用的指令不多,但各個都很好用,特別是「watch」這個指令,這可是讓工程師省下手動編譯Sass程式的最大幫手阿!

話不多說來看看compass指令吧!

1.查看compass指令

首先Mac使用者請開啟終端機,windows使用者請開啟命令提示字元,並輸入以下命令(以下以windows系統示範):

  1. > compass help

compass-help
[圖一]compass help指令
這個指令會列出所有compass自帶的指令及指令的解釋,就像產品自帶的使用說明書一樣。當然更詳細的內容還是要到官網或是實際操作一次才會知道了。

2.compass指令介紹

首先根據各個指令的順序與位置,可以看到指令分為兩種:Primary Commands 跟 Other Commands。前者是主要的指令,在compass專案裡主要會使用的都是這邊的指令;後者是其他指令,在整個專案進行過程中不一定會使用到,視專案是否需要此功能。

Primary Commands

  • Clean:移除專案資料夾裡產生的檔案及sass暫存檔
  • compile:將sass檔案編譯成css檔案
  • create:產生一個新的compass專案
  • init:添加compass相關設定檔至一個已存在的專案
  • watch:當專案資料夾裡的sass檔案更動時,自動將該sass檔案編譯成css檔案

Other Commands

  • config:產生一個compass的設定檔
  • Extension:維護系統上的compass extension
  • frameworks:列出可取得的framework
  • help:取得compass的命令或extension
  • imports:(看了一下還是不懂)
  • Install:安裝extension’s pattern至compass專案
  • interactive:(研究中)
  • sprite:將數張小圖組成一張大圖
  • stats:印出當前專案裡所有sass/scss檔案的資訊
  • unpack:複製extension至專案裡extension的資料夾
  • validate:驗證產生的css檔案
  • version:印出版本資訊

使用方面,只要在終端機或命令提示字元裡輸入「compass」,空一格後打上指令即可。舉例來說,進行專案時,最常用的應該就只是「watch」:

  1. > compass watch

使用前記得先用終端機或命令提示字元開啟專案(cd道專案資料夾)。

其他指令之後的課程會逐屆碰到,到時會有詳細的介紹,敬請拭目以待。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.