初次接觸 SASS（Syntactically Awesome Style Sheets）時，可能只有一頁設計稿，並且沒有特別感受到它的威力。相反地，花了很多時間思考如何將設計稿拆分成組件，以及何時使用 @mixin、@extend 等功能。在這個過程中，常常覺得在浪費時間，而且思緒混亂，然而，當我閱讀了胡立所分享的《零基礎的小明要如何成為前端工程師？》，明白工具本身並不是問題所在，而是我們如何運用這些工具的問題。SASS，就像許多其他前端工具一樣，可以成為我們的朋友，只要我們了解它的優勢並善加利用。

前置處理器(pre-processor)

• 前置處理器是程式設計中的一個軟體工具， 用於在編譯前對原始程式碼進行預處理，最終生成編譯器可以接受的程式碼，例如，Sass 中的前置處理器可以用來編寫更加簡潔、易於維護和重複使用的 CSS。

常見的 CSS 前置處理器

1. Sass：Sass 是一種基於 Ruby 的 CSS 前置處理器，支持變量、嵌套、混入等功能，可以簡化 CSS 的編寫。
2. Less：Less 是一種基於 JavaScript 的 CSS 前置處理器，支持變量、嵌套、混入等功能，並且可以在客戶端和服務器端都使用。
3. Stylus：Stylus 是一種基於 Node.js 的 CSS 前置處理器，支持變量、嵌套、混入等功能，並且具有強大的函數和運算符支持。

SASS 兩種書寫方式: Sass & SCSS

SCSS（Sassy CSS）和 Sass（Syntactically Awesome Style Sheets）都是 Sass 預處理器的不同實現方式

• Sass 最早的寫法
  縮排風格（Indentation Style）
  沒有『分號;』與『大括號{}』
  不兼容 CSS
  簡潔、易讀、易維護
• SCSS 後來出的，寫法比較像ＣＳＳ
  大括號風格（Brace Style）
  有『分號;』與『大括號{}』
  兼容 CSS
  與 CSS 的語法風格類似，更易於學習和理解
• 相同：除了語法風格不同外，SCSS 和 Sass 的功能和用法基本相同，它們都提供了變量、混入、繼承、控制結構等強大的功能，可以提高 CSS 代碼的可讀性、可維護性和重用性。
• 風格選擇：選擇使用 SCSS 還是 Sass，主要是取決於個人喜好和開發習慣。如果你熟悉 CSS 的語法風格，可能更喜歡使用 SCSS；如果希望更簡潔的語法風格，可以選擇 Sass。

認識『主要功能』

1. 變數（Variables）： SASS 允許我們定義和使用變數，這意味著我們可以在整個樣式表中輕鬆更改顏色、字體等屬性，而不必手動查找和替換每個出現的值。
2. 巢狀規則（Nesting Rules）： SASS 允許我們將子選擇器嵌套在父選擇器內，以更清晰地表示 HTML 結構，使代碼更具可讀性。
3. 混入（Mixins）： 混入是一種可重用的樣式片段，可以在多個地方使用。這樣，我們可以輕鬆地添加相同的樣式效果而不必重複編寫代碼。
4. 繼承（Extend）： 使用@extend，可以將一個選擇器的樣式繼承到另一個選擇器，這有助於減少代碼的冗余。

使用心得五四三

• Sass Guidelines是熱血開發者寫的，可參考但不是強制。
• 不用＠import 而用＠use 的理由，主要是因為只使用 ＠import，並且將整個模組引入，可能會增加加載量，導致較長的下載和載入時間。使用 ＠use 可以幫助減小大小，只載入需要的部分。除此之外，
• 不把元件包在 layout 裡，這樣比較能控制順序、權重問題。

記得年初的時候 CSS 有了原生巢狀（CSS Nesting）工作室有一波讚喔！因為大家使用 SASS，主要都取用他強大的巢狀功能，這時候，我在想，所以 SASS 會不會衰退？

有人說，SASS 企圖讓 CSS 看起來更像程式語言，也有人說，SASS 是讓沒學過程式語言，可以從 CSS 過渡ＪＳ的方式，也聽過，有人把 SASS 當作工作區，轉譯過後的.css 交付出去，但.scss 則保有自己當時候的工作註記等，很多應用和看法，所以，我想應該是不會衰退ＸＤ還是要好好學喔！

參考資料與更多閱讀

An Introduction to Native CSS Nesting
Sass: Syntactically Awesome Style Sheets
Sass Guidelines
Stop using @import with Sass | @use and @forward explained