Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間

梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
  從事網頁設計的朋友,應該對於CSS不陌生,隨著時代的變遷科技的進步,CSS也從2.0版逐漸的跨入3.0版,雖然說目前3.0版,還不是最終版,但已帶來許多的便利,像是早期的圓角框得用圖片,且還要包的跟肉棕一樣,那圓角矩形框才能自由的延展,而現在透過3.0只要下個語法,立馬就能將方框變圓角框,真是超方便的,除此之外CSS3.0可繪圖也可作動畫,讓網頁的互動性更好,但有寫過CSS3.0的朋又都知道,有些語法真是長到嚇死人,若每個都自已key,那還真的會key到瘋掉,所以這時不妨可試試SASS,將一些常用的屬性先寫好,之後要用時再給參數,就可直接套入此效果,有效的加快CSS的寫作時間喔!至於要怎麼打造SASS的平台呢?接下來就一塊來看看吧!

安裝Ruby環境:
由於Sass是採用Ruby程式語言所寫的,因此系統需先安裝Ruby環境才能使用,因此得先到Ruby官網下載並安裝。(下載Ruby)
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
安裝Sass:
開啟命令視窗,輸入gem install sass指令,再按Enter鍵。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
安裝Compass:
安裝好Sass後,接著再輸入gem install compass指令。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
建立SASS專案:
首先,進到要開發專案的目錄下。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
再輸入compass create project001指令。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
建制完成後,會看到以下的畫面。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
接著到剛所指定的專案目錄下,就會看到以下的資料夾與檔案。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
Sublime Text安裝Sass:
接著開啟Sublime Text編輯器,按Ctrl + Shift +P鍵,再輸入install
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
輸入sass關鍵字,再點下方的清單。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
當安裝完成後,下方就會出現成功的訊息,再重覆以上步驟,分別再安裝SASS snippetsCompass二個套件。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
Sublime Text使用Sass:
都完成後,就可開始來寫Sass囉!首先,進到Sublime Text後,再選擇Project / Add Folder to Project選項。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
選擇剛所建立好的專案目錄。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
選擇完畢後,再選擇View / Show Side Bar選項。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
接著左側就會出現專案的目錄,sass是儲放原始檔的目錄,而stylesheets是轉存好的css檔。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
Alt+Shift+2,將畫面一分為二,再個別載入檔案,一個是原檔,另一個是轉出後的CSS檔。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
開啟命令視窗,進入該專案的目錄下,再輸入compass watch指令,並請勿關閉此視窗,由於它會自動監控,每當Sublime Text一儲存時,就會立即轉存成css檔。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
這時可看到,右邊立即就會呈現出,左邊所寫的結果。
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間
千萬要記得,別把命令視窗給關閉了,否則會無法即時的轉檔喔!
梅問題-Sublime Text2安裝SASS開發環境有效縮短CSS撰寫時間

相關文章

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

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

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

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

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

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

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

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

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

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





回應本篇 »

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

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

共 2 梅留言

  • 第2梅
    stan 說道:

    請問一下,我安裝成功,也可以寫SASS,也用了梅大推薦的SASS 專案產生器

    1.我想問的是,我有啟動watch.bat,Sublime開雙視窗,SASS編輯存檔後,似乎需要在css的視窗點一下,才會編譯(更新),怎樣才能達到SASS存檔 CSS檔就能自動編譯更新?

    是否我還需要安裝什麼套件呢?

    2.多請教一件事,怎樣可以讓sublime編輯後,browser可以自動refresh?

  • 第1梅
    Charles 說道:

    梅干你好:

    謝謝你提供很多有用的資訊上來給大家。

    Ruby editon: RubyInstaller for windows Ruby 2.0.0-p451 (x64)

    我依照你寫的順序建置到『建制完成後,會看到以下的畫面。』

    就出現以下畫面→ http://goo.gl/aXKKB1,建置失敗了。

    不曉得怎麼回事,可以麻煩你幫我看一下,我該怎麼做,

    在這邊卡很久,對於要進入compass、sass的入門者。謝謝

    回應:
    這一個試用看看
    https://www.minwt.com/html/10024.html