當一個專案變得越來越大，CSS的複雜性也隨之增加，要管理龐雜的程式碼變得很麻煩。這篇開始要介紹的Sass，可以幫助我們解決這些問題，並將CSS代碼組織得更加結構化。從本文開始，接下來幾篇文章將介紹Sass、如何使用它來改善CSS開發流程。

Sass簡介

Sass，即Syntactically Awesome Stylesheets的縮寫，是一種CSS預處理器（CSS preprocessor）。Sass引入了許多強大的功能，使得CSS的編寫變得更加高效和具有結構性。Sass提供了變數(Variables)、嵌套規則(Nested Rules)、混入（Mixins）、函數等功能，這些功能有助於減少代碼重複性，提高代碼的可維護性。

安裝Sass

1. 一樣使用VS code開發(window)。在專案資料夾下下載Sass，然後確認版本號，如果有看到就表示安裝成功了。

npm install -g sass
sass --version

預處理器

預處理器（Preprocessor），在軟體開發中通常用於修改原始程式碼，以生成最終的程式碼。預處理器通常有以下幾項特點：

1. 宏展開（Macro Expansion）： 預處理器可以將程式中的宏（macros）展開為實際的程式碼。這允許我們使用自定義的縮寫或標記，而不必直接編寫冗長的程式碼。
2. 條件編譯（Conditional Compilation）： 預處理器可以根據特定的條件指示來編譯或排除程式碼的部分。這使得可以在不同的環境下生成不同的程式碼版本。
3. 文件包含（File Inclusion）： 預處理器可以將其他文件的內容包含到源文件中，也讓我們可以將代碼模組化並重用。
4. 符號替換（Symbol Replacement）： 預處理器可以替換代碼中的符號或變數，以便在編譯過程中使用特定的值。
5. 編譯時計算（Compile-Time Computation）： 有些預處理器支持在編譯時執行計算，這樣可以在編譯期間生成常數或表達式的值。

以下範例可以幫助了解Sass做了什麼事。

在建立input.scss和output.scss兩支檔案後，我們可以使用sass命令將Sass編譯為CSS。我們需要告訴Sass從哪個文件生成，以及將CSS輸出到哪個位置。如以下範例，命令Sass文件input.scss，然後將該文件編譯為output.css。

sass --watch input.scss output.css

執行之後，應該可以看到多了output.css和output.css.map兩個檔案。

接著在input.scss檔案設定一段樣式後，可以看到終端機出現Compiled input.scss to output.css.的字樣，在output.css則可以看到我們在input.scss設定的樣式內容。

//example
p{
    font-size: 24px;
}

💡分享：除了用指令來指定編譯的檔案，如果使用VS Code開發，也可以下載擴充(extension)”Live Sass Compiler”。下載完成可以在頁面右下方點擊”Watch Sass”，就會即時監測、並把所有.scss檔案編譯成.css。

參考資料：

1. The Beginner’s Guide to Sass：https://www.freecodecamp.org/news/the-beginners-guide-to-sass/
2. Sass:Install Sass：https://sass-lang.com/install/
3. Sass:Sass Basics：https://sass-lang.com/guide/