版權說明
本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下
引用文章
- 課程
[week 13] 前端工具之二 - CSS 預處理器、Babel
- [FE201] 前端中階的總結筆記
- 內文說明怎樣安裝
使用 SASS(SCSS)建立自己的 CSS Library :: 2021 iThome 鐵人賽
- 講解 Sass 的觀念時順便做出一套 CSS Library
[CSS] Sass 入門教學-新手上路重點摘要(上) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天
- scss 的基礎寫法
其他工具
線上轉檔
什麼是 CSS 預處理器？ (3:58)
幫 Css 編碼 用預處理器的語法 寫可以寫得更快 然後再轉成原本的 CSS
跟後處理器不一樣
為什麼要用 CSS 預處理器?
- 方便 一次可已修改許多參數
- 不用一直打{ } 或是重複的 class
- 巢狀方便閱讀
CSS 在開發上可能遇到哪些問題?
- 全域會互相干擾
- 例如：在 index.html 同時引入 main.css 和 normalize.css 可能會互相干擾，不易進行 debug 與維護
- 沒有變數
- 現在有 CSS Variable
- 沒有辦法組合
SASS 寫一個專案會怎樣寫?
把功能都分開 然後引入到 main
- 可以讓你清楚的管理你的 css，再者之後你需要重複的樣式，即可直接帶入
- 將分出的區塊以
@import引入，完成後將所有檔案打包
main.css 通常由下列要素組成：
- utils：整理出常用的 variables（背景顏色等）和 mixins（垂直至中、對齊等樣式功能）
- Components：整理跨頁元件
- Layouts：獨立的大元件
- Pages
- 其他樣式：themes（dark mode）、vendors（bootstrap css）
SASS 跟 SCSS 的區別
SASS 更簡潔 省去{}
還有其他處理器可用 要用在查
圖片來源:
一起來用 Sass+Compass 吧，我們可是一秒幾千萬上下的前端工程師，怎麼能把時間浪費在 css 身上呢！
怎樣引入 相關語法
安裝 Sass
npm install -g sass
-g 表示在全域安裝
一次性編譯
sass main.sass main.css
將 main.sass 檔編譯成 main.css
watch 模式
sass --watch main.sass main.css
每次存檔均會自動進行編譯
壓縮功能
sass --style=compressed mais.sass main.css
通常是在開發最後才會執行