Yijen's blog

關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 324196

    累積人氣

  • 60

    今日人氣

    0

    訂閱人氣

[教學] 在 Windows 打造 sass(scss) + Compass 撰寫環境 with Sublime Text 2

Step3 - 安裝Compass

gem install compass

基本的核心三要素至此已完成,接下來我們要在 terminal 視窗建立第一個 Sass + compass project。首頁我們先移動到想要安裝的目錄之下 (ex: D:/develop)

cd d:/develop

建立專案

compass create project001

完成後,應該會看到如下畫面

Step4 - 安裝 Sublime Text 必要的 packages

PS:如果您的 Sb2 or Sb3 還沒安裝 Package Control, Please go here

成功安裝後,在Sb2裡按 Ctrl + Shift + p => 叫出指令列,輸入 package control 即會帶出 package 相關操作指令,選擇 Package Control: Install Package

此時你可以透過關鍵字搜尋線上的 Sublime Text Packages,請安裝下列3個。

  1. SASS
  2. SASS snippets
  3. Compass

Step5 - 開始用 Sublime Text 2 來 Sass 一下啦!

透過 Sb2 的功能將方才建立好的 Compass folder 轉成一個 project

會看到這樣的結構

開啟 screen.scss 應該會看到如下畫面,乾淨的預設值,且 .sass 檔案因為我們安裝了 sass 相關 package 的關係,程式碼文字都有良好易讀的配色。

試一下代碼提示功能(Auto Complete)如何?

Again, works perfect!

Step6 - Compass Watch 功能

當我們儲存好了 .scss file,需要透過 Compass 的 Compile 指令來編譯使它成為 browser 看得懂的 .css file,而 Compass 其中的 watch 功能,則是監控 .scss 檔案,一但有了任何變動,就會自動地進行 Compile 的動作轉成 css file 存至 stylesheets folder 裡面。

我們再一次回到命令提示字元,先輸入 cd project001 進入方才建好的 folder,然後執行

compass watch

之後回到 Sublime Text 安心地編輯你的 scss file,只要任何時間你儲存了檔案,compass watch 就會自動編譯成 css,結束編輯時,只要回到 Terminal 按下 Ctrl+C 就能終止 Watch。

結語

基本上,Sass 環境的建置在前三個步驟就已經OK了,後三步驟是將 Sublime Text 2 調整成編輯 .sass 或 .scss with compass 時最有效率的操作。簡單幾個步驟介紹,希望對有興趣從純 CSS Coding 踏入 Sass 這神奇的 css preprocessor Coding 卻不知從何下手的 frond-end 前端伙伴們有所助益。

推薦參考資源

延伸閱讀

相簿設定
標籤設定
相簿狀態