網設必備《Koala》LESS/SASS 即時監控與編譯工具

梅問題-《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 即時監控與編譯工具

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    DODO 說道:

    看來也得去懂LESS、SASS….