close
Blogtrottr
♣梅問題‧教學網【Minwt】♣
3C|設計|攝影|旅遊 資訊網 
網設必備《Koala》LESS/SASS 即時監控與編譯工具
Feb 9th 2015, 05:50, by admin

梅問題-《Koala》LESS/SASS 即時監控與編譯工具
  現在製作網頁已不像早期,透過Photoshop將版型作好,再到Dreamweaver排一排就好了,網頁的技術愈來愈多元,光是CSS也從2.0升到3.0,讓網頁變得更有變化性,但屬性比之前來的多很多,每次要用時,就得一一的key實在很累人,這也是為何最近許多從事網頁的朋友,也開始使用LESS、SASS,最主要的原因就在於,可以縮短網頁的製作時間,二來是方便控管與修改參數,但有寫過LESS或SASS/SCSS的朋友都知道,電腦需要安裝編譯器,才能將less或sass的檔案轉成css檔,如此一來瀏覽器才能讀取,但每當換台電腦或重灌,就要裝一些東西才能使用,且還要透過命令視窗,去監控專案資料夾,實在有點小麻煩,而梅干最近發現對岸一個好用的工具Koal,除了可即時監控專案資料夾外,當寫好的less或scss檔案儲存時,立即就會編譯成css檔,且還無論是MAC/Win系統皆可用,更重要的是該工具完全免費,因此有在開發less與 sass的朋友,千萬別錯過了。

Koala:
軟體名稱:Koala
軟體語言:正體中文
適用平台:MAC/Windows
軟體性質:免費
軟體下載:koala-app.com

Step1
進到首頁後,MAC的話就點立即下載,若是Widnows的朋友,就點下方的其它版本
梅問題-《Koala》LESS/SASS 即時監控與編譯工具
Step2
安裝完畢後,點一下Koala.app,圖示就長的像隻熊貓。
梅問題-《Koala》LESS/SASS 即時監控與編譯工具
Step3
開啟軟體後,點一下右邊的齒輪圖示。
梅問題-《Koala》LESS/SASS 即時監控與編譯工具
Step4
接著在語言的下拉選單中,設定為正體中文,按下OK再重啟軟體。
梅問題-《Koala》LESS/SASS 即時監控與編譯工具
Step5
之後將要監控與編譯專案的資料夾,直接拖拉到視窗上方。
梅問題-《Koala》LESS/SASS 即時監控與編譯工具
Step6
接著按滑鼠右鍵,選擇設定輸出路徑
梅問題-《Koala》LESS/SASS 即時監控與編譯工具
Step7
選擇less與sass要輸出的目錄與檔名。
梅問題-《Koala》LESS/SASS 即時監控與編譯工具
Step8
由於梅干是寫less,所以在右邊的輸出方式只有二種可選擇,一般要給自已看,就選擇normal,當要放到網路上,就選擇compress將css壓縮起來。
梅問題-《Koala》LESS/SASS 即時監控與編譯工具
Step9
這時開啟Sublime編輯器,當編輯好的less按下儲存時,就會立即編譯成css,當編輯好了後,還會有提示框告知。
梅問題-《Koala》LESS/SASS 即時監控與編譯工具
Step10
這時在css的目錄下,就會看到剛所編譯好的檔案啦!是不是超方便,就不用還要裝一堆有的沒的軟體啦!但使用SASS/SCSS的朋友,要注意到要自行再加裝RUBY才能運作喔!
梅問題-《Koala》LESS/SASS 即時監控與編譯工具


引用網址: ※如有發現掉圖或檔案無法下載,請由回應區留言告知,將會盡速處理!謝謝。
※本站採用CC授權請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處,謝謝。

Recommended article: Chomsky: We Are All – Fill in the Blank.
This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions
arrow
arrow
    全站熱搜

    slw2 發表在 痞客邦 留言(0) 人氣()