SCSS

什麼是 CSS 預處理器 CSS 預處理器是一種工具，使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇，它們通常會提供一些純 CSS 中沒有的功能，例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護，並提高開發效率。 為什麼使用 CSS 預處

CAN I USE 解決方法 加入 SCSS 或是 CSS 在 SCSS 檔案中加入以下這段 Code $max:20; @for $i from 1 through $max { body.below-safari14 { .flex-row { &.flex-n

我在準備進入切版的第一步通常會是設定好全域樣式，以及整理出有哪些共用樣式，也就是把設計稿上規範好的設計系統，例如顏色、間距、字體等等先寫好 CSS，而我自從會 SCSS 後就習慣用這個方式去寫 CSS，透過分成不同檔案、依序載入，日後在修改跟維護上會比較好管理跟減少時間。

使用 SCSS 來管理 CSS 可以說是每次建置專案的起手式了，加上很常搭配客製化 Bootstrap 來開發，因此決定記錄下引入過程、遇到的錯誤訊息與解決辦法，以節省日後建置時間，如果對你也有幫助，那就太好了。

這篇文章更偏向純紀錄性質，方便日後有需要時直接複製相同指令來完成 Bootstrap 與 Sass 的引入，也會做成一個專案起手式的模板放在 Github ，未來在建置新專案時可以透過直接複製專案，來省去前面重複的這過程。

這篇記錄 Sass/SCSS 編譯與語法

SCSS與SASS都是CSS預處理器，可以幫助開發者更方便管理CSS程式碼，而SASS寫法上不須加上「{} ;」，而是用縮排來簡化，SCSS寫法上則類似CSS，可以兼容CSS語法，SASS則無法兼容CSS語法，以下將以SCSS為主來說明。 CSS/SCSS/SASS寫法差別 安裝scss編譯器