Sass 編譯的幾種方法

常常有人會問，使用 sass 進行開發，那麼是不是直接通過「」引用「.scss」或「.sass」檔案呢？

那麼這裡告訴大家，在專案中還是引用「.css」檔案，sass 只不過是做為乙個預處理工具，提前幫你做事情，只有你需要時候，他才有攻效。

這樣一來，也就有了這章需要介紹的內容—— sass 的編譯。因為 sass 開發之後，要讓 web 頁面能呼叫 sass 寫好的東西，就得有這麼乙個過程，這個過程就稱之為 sass 編譯過程。sass 的編譯有多種方法：

命令編譯是指使用你電腦中的命令終端，通過輸入 sass 指令來編譯 sass。這種編譯方式是最直接也是最簡單的一種方式。因為只需要在你的命令終端輸入：

單檔案編譯：

sass 《要編譯的sass檔案路徑》/style.scss:《要輸出css檔案路徑》/style.css

這是對乙個單檔案進行編譯，如果想對整個專案所有 sass 檔案編譯成 css 檔案，可以這樣操作：

多檔案編譯：

sass sass/:css/

上面的命令表示將專案中「sass」資料夾中所有「.scss」(「.sass」)檔案編譯成「.css」檔案，並且將這些 css 檔案都放在專案中「css」資料夾中。

缺點及解決方法：

在實際編譯過程中，你會發現上面的命令，只能一次性編譯。每次個性儲存「.scss」檔案之後，都得重新執行一次這樣的命令。如此操作太麻煩，其實還有一種方法，就是在編譯 sass 時，開啟「watch」功能，這樣只要你的**進行任保修改，都能自動監測到**的變化，並且給你直接編譯出來：

sass --watch 《要編譯的sass檔案路徑》/style.scss:《要輸出css檔案路徑》/style.css

當然，使用 sass 命令編譯時，可以帶很多的引數：

watch 舉例：

來看乙個簡單的示例，假設我本地有乙個專案，我要把專案中「bootstrap.scss」編譯出「bootstrap.css」檔案，並且將編譯出來的檔案放在「css」資料夾中，我就可以在我的命令終端中執行：

sass --watch sass/bootstrap.scss:css/bootstrap.css

一旦我的 bootstrap.scss 檔案有任何修改，只要我重新儲存了修改的檔案，命令終端就能監測，並重新編譯出檔案：