(1)Sass/SCSS傻傻分不清?

終於來到這個曾讓我聞之色變的主題!

Sass 與 gulp 這兩個好朋友是我曾經想學好，卻半途而廢的兩項技能啊🙈，因此至今還在用原始人的方式寫 code，這次順著「六角學院網頁切版直播班」課程流程，我立志要將這兩項技能學好，從原始人進階為高效率開發者 ! (握拳)

🙋‍♀️可以開始發問了嗎 ?所以常常聽到的 Sass 到底是什麼呢 ?

Sass 是一個 css 預處理器(CSS preprocessor)，寫過 css 的人應該都會遇到以下情況 (還是只有我?)

1. 寫 .header 的樣式寫完，接著寫 .header ul、.header li、 .header li a，此時不禁思考，這些重複打.header 等外層標籤名稱的時間，是否可以省下來做更有意義的事…(遠目)
2. 當 class 名稱撞名，臨時想改掉時，便要一個一個找出來改名字，雖然習得 VS CODE 熱鍵技能後，知道可以用 ctrl+D 或 ctrl+F2 找相同名稱，但不禁又開始讓人思考，每天這樣按，是否有更好的選擇…(遠目)
3. 各種顏色設定讓人好苦惱，但一個網頁通常會有主色及延伸的輔助色，是否有更好的方式能將他們有效整合運用?(再度遠目)
4. 雖然已經能將重複的 CSS 樣式整理出來，變成一些共用的小工具，但全寫在同一個 CSS 檔案依舊落落長，再加上檔案開頭的 CSS reset，找個code 又要滑鼠滾輪滾一波，不禁再度思考…(你懂的)

相信還有更多的疑難雜症，此時就是與我一起開始使用 Sass的最佳時機 !

也因為以上惱人的開發問題，某些聰明的人類便發明了css 預處理器，提升開發效率，造福你我~~🤩

目前主流的 CSS 預處理器有三種，分別是 Sass/SCSS、Less、Stylus，這邊之後我會跟大家介紹的是 SCSS。

🙋‍♀️可以繼續問了嗎 ? 為什麼 “ 薩 s “ 會分為 Sass及 SCSS 呢 ?

以前都覺得，阿兩個不就一樣的東西，其中一定有誰拼錯 (?)

後來才知道其實是兩種不同的寫法 :

Sass

• 一種縮排式的 HTML 模版語法
• 語法不寫大括號及分號
• 官方範例 :

編譯後的 css 如下 :

由於 Sass 無法兼容舊有 CSS 語法，

所以後來發展出另種兼容 CSS 的新語法 — SCSS !

SCSS

• 寫法類似 CSS ，有大括號及分號
• 在 SCSS 檔案直接撰寫 CSS 也沒問題
• 範例如下 :

SCSS 寫法幾乎與 CSS 無太大的差別，較好入門，適合熟悉 CSS 語言，想進階學 Sass 的初學者。

下一篇就來針對上面提到的4點惱人開發問題，

一一使用 SCSS 對症下藥吧 !🕵️‍♀️

(2)Sass/SCSS可以如何提升CSS開發效率?

參考資料來源:

30天掌握Sass語法 — (1)什麼是SASS？它真的能加速我寫CSS的效率嗎？ — iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

Sass/SCSS 基本語法介紹，搞懂CSS 預處理器｜ALPHA Camp Blog