網設必備《Prepros》免再安裝其它軟體即可編譯Jade/SASS

梅問題-網設必備《Prepros》免再安裝其它軟體即可編譯Jade/SASS
  先前分享過《Koala》LESS/SASS 即時監控與編譯工具,方便針對LESS/SASS進行CSS的開發,但若是用SASS就得再額外裝RUBY,但Koala只支援CSS的編譯,當有在用Jade與SASS開發網頁時,電腦就得再安裝其它的軟體才能支援,實在有些麻煩,所以梅干最近發現另一套相當好用,且功能完整的編譯工具,只要安裝該軟體後,就可同時編譯Jade、Less、Sass....等,完全不用額外再裝其它的套件,且更重要的是它與Sublime text一樣,也提供永久的試用,因此在開發前端的朋友Prepros絕不容錯過。

Prepros:
軟體名稱:Prepros
軟體語言:英文
軟體性質:$29(無限期使用)
適用平台:Windows/MAC
支援語言:LESS/SASS/JADE
軟體下載:prepros.io

Step1
首先,進到下載頁面後,選擇自己所需的系統版本。
梅問題-網設必備《Prepros》免再安裝其它軟體即可編譯Jade/SASS
Step2
安裝完畢後,雙響Prepros圖示,就可啟用。
梅問題-網設必備《Prepros》免再安裝其它軟體即可編譯Jade/SASS
Step3
開啟Prepros後,界面與Koala相當雷同,並將要監控的專案資料夾,直接拖拉到視窗上。
梅問題-網設必備《Prepros》免再安裝其它軟體即可編譯Jade/SASS
Step4
Prepros最大的好處就是,直接就可編譯SASS的檔案,且點一下.scss就可選擇編譯模式。
梅問題-網設必備《Prepros》免再安裝其它軟體即可編譯Jade/SASS
Step5
接著就可選擇要輸出的格式。
梅問題-網設必備《Prepros》免再安裝其它軟體即可編譯Jade/SASS
Step6
這時將編輯好的jade檔案,按下儲存後,立即就會輸出成.html檔啦!
梅問題-網設必備《Prepros》免再安裝其它軟體即可編譯Jade/SASS
Step7
就連scss檔也一樣,按下儲存後,立即就會輸出成.css檔。
梅問題-網設必備《Prepros》免再安裝其它軟體即可編譯Jade/SASS
Step8
當然less也是一樣,儲存完畢後,立即就會輸出成css檔。
梅問題-網設必備《Prepros》免再安裝其它軟體即可編譯Jade/SASS
Step9
由於它與Sublime一樣,提供永久試用,所以也一樣三不五時會跳出購買視窗,若覺得不錯用的話,也可購買支持一下,若預算有限,可按Continue Trial就可繼續使用啦!
梅問題-網設必備《Prepros》免再安裝其它軟體即可編譯Jade/SASS

相關文章

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

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

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

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

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

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

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

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

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具





回應本篇 »

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

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

共 1 梅留言

  • 第1梅
    花花 說道:

    請問是不是不能製作sprite圖 語法如下:
    $sp-sprite-dimensions: true;//計算圖片寬高、預設為false
    $sp-spacing: 5px;//圖片間距
    $sp-sprite-layout: horizontal;//圖片垂直排列
    @import “compass/utilities/sprites";
    @import “sp/*.png";//匯入檔案、圖片class="資料匣名稱-圖片名稱"
    @include all-sp-sprites;//轉換圖檔