2017/08/31

【SCSS】如何使用SASS/SCSS?

SASS是一種撰寫CSS的「工具」(可能有其他更貼切的講法),開發人員可以將寫好的SASS(SCSS)進行編譯後,產生給客戶端使用的CSS檔案。

對,你沒有看錯,就是開發人員,我指的就是開發CSS樣版的設計師/工程師。

SASS/SCSS並非讓CSS比較容易寫,而是讓CSS樣版開發更容易。維護也更容易。

而是否學習使用SASS/SCSS就不用了解CSS,答案當然是絕對否定。沒有CSS的概念和語法知識,SASS/SCSS完全就無法使用。

簡介就差不多至此,下面來分享如何使用SASS/SCSS的流程。(Windows環境)

  1. 安裝 Ruby Installer (官網)
  2. 啟動 Command Prompt with Ruby
  3. 執行指令 [ gem install sass ] 安裝 sass
  4. 執行指令 [ gem install compass ] 安裝 compass
  5. 至此已將環境安裝完成
  6. 建立一個main.scss檔案,裡面簡單打幾行css語法
  7. 執行指令 [ sass main.scss main.css ] 進行編譯,就會取得 main.css 檔案

以上就是基本的使用教學,
後續還會有SASS/SCSS語言教學、Compass編譯、儲存自動編譯。

總之記得,客戶端最後還是使用CSS檔。