網設必備《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

相關文章

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟





回應本篇 »

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

※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;//轉換圖檔

近期講座

近期講座

更多講座