iT邦幫忙

DAY 8
6

30天掌握Sass語法系列 第 8

30天掌握Sass語法 - (8)Sass、Compass環境安裝流程教學

之後會講到Compass的功能,
它是一個支援Sass的強大工具,
所以這裡就順道講一下該如何在windows的環境下使用Sass,
同時錄製安裝流程影片,提供各位參考與學習,
請用720P加全螢幕進行瀏覽。
Yes
之後會講到Compass的功能,
它是一個支援Sass的強大工具,
所以這裡就順道講一下該如何在windows的環境下使用Sass,
同時錄製安裝流程影片,提供各位參考與學習,
請用720P加全螢幕進行瀏覽。
Yes
步驟一:安裝ruby
Sass與Compass是用ruby開發的,
如果你是windows環境時,
就必須先到他的官網安裝最新的ruby,
http://rubyinstaller.org/downloads/

步驟二:安裝Sass、compass
按下『Windows(微軟鍵)』+R,
在跳出的視窗打入「CMD」後按確定便可開啟「命令提示字元」,
輸入以下程式碼後按ENTER,

gem install compass

步驟三:開啟一個Compass專案
先在D槽開一個新資料夾為compass後,
在命令提示字元打以下程式碼後,
系統就會自動在compass資料夾新增一個名為coffee的專案,

d:
cd compass
compass create coffee

當你希望sass檔案更新時,系統就直接編譯成CSS的話,
需輸入以下字元進行監控動作:
註:後面的coffee則看你的專案資料夾而有所修改,

compass watch coffee

而要停止監控(watch)的話,則是命令提示視窗打ctrl+c就可以停止。

步驟四:config.rb設定
1.如果你希望sass編譯出來的css不要有註解,
那就打開根目錄的config.rb,
將# line_comments = false 前面的#號拿掉就不會產生出註解。

2.裡面會有四行以下的預設設定碼,
如果你放CSS的資料夾名稱為CSS,
便把stylesheets名稱改為CSS,
這樣Sass編譯出來的CSS就會在CSS資料夾,
而不會style裡面。

css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

注意:當修改config設定後,
要重新在命令提示字元watch資料夾一次,
設定才會生效。

--

配合文字步驟與我所錄製的影片,
相信大家應對該如何安裝Sass與Compass環境已有更深入的了解,

但從影片內容各位也看得出來,
他是必須用類似dos視窗來去設定路徑與環境,
這其實對一般已熟悉GUI介面的網頁設計師極為不方便,
所以有人研發出了Fire.app的軟體出來,
裡頭有很多好用的功能,
尤其在新增Sass Compass專案上也較為方便,
你甚至不用安裝ruby一堆有的沒的,
就可以直接使用Sass Compass來寫CSS,
所以這裡我也特地錄製了一段,
使用fire.app新增Sass Compass專案的流程給各位參考,
Yes

延伸閱讀:
用 Compass 取代 CSS,寫個 html 專案:
http://www.mukispace.com/compass-for-html-code-project/
CSS沒有極限 - Sass 與 Compass(1)
http://ithelp.ithome.com.tw/question/10127659?tag=ithome.nq


上一篇
30天掌握Sass語法 - (7)利用Sass「@extend」,讓你無痛合併CSS樣式
下一篇
30天掌握Sass語法 - (9)如何逐步建立自己的CSS資料庫
系列文
30天掌握Sass語法41

2 則留言

0
cai_Hulk
iT邦新手 5 級 ‧ 2016-02-03 18:26:54

為甚麼會出現
error individual stylesheets must be in the sass directory

我要留言

立即登入留言