你還在手動下指令編譯嗎？ 每次修改完都還要做這個步驟才能看到畫面嗎？
我們都知道寫好的 SCSS 是無法直接使用的，因為瀏覽器無法直接解析 SCSS，因此需要將其編譯成瀏覽器可讀取的 CSS。
作為一位工程師，專注於開發高品質、高效率的軟體是非常重要的。然而，在日常的開發過程中，往往會遇到許多瑣碎的問題，我們的時間不應該浪費在這些 routine problem 上。因此，為了能夠更專注於軟體開發，就讓豹哥來介紹一個 Rider 好用的插件 ”File Watchers” 吧!
為什麼會需要自動化
秉持著 Never Stop Improving 的核心精神，學習新技能來提升自我是有必要的，SCSS 是一種 CSS 的擴展語言，它引入了許多方便的特性，例如變量、巢狀規則、混入和繼承等，對於我們來說，使用 SCSS 可以大大提高開發效率，讓代碼更易讀、易維護。
在剛開始接觸 SCSS 的時候，都會遇到一個問題，那就是每當修改了 SCSS 代碼之後，都需要手動運行指令來將 SCSS 編譯成 CSS。這個問題看似微不足道，但當你需要不斷修改 SCSS 代碼時，這種手動下指令的重複操作會讓人十分煩惱，同時也浪費了許多時間。
為了解決這個問題，我們可以使用一些工具來自動化這個過程，這些工具可以監聽 SCSS 文件的變化，當文件發生變化時自動運行指令，將 SCSS 編譯成 CSS，使用這些工具可以使我們專注於代碼的撰寫和調試，同時也提高了工作效率。
總之，SCSS 是一種非常實用的前端開發工具，它可以使代碼更加易讀易維護。但是，手動下指令的重複操作會浪費很多時間，因此使用自動化工具來解決這個問題是非常必要的。
如何自動化 SCSS 編譯成 CSS
“File Watchers” 是 Rider 集成的一個小插件，它能夠幫助我們在開發過程中更加方便地生成 CSS 文件，該插件的主要功能是監聽指定的文件或目錄，當檔案變動時自動運行指令生成 CSS，這樣我們就不需要手動執行生成 CSS 的指令，節省了開發時間和提高了效率。
除了生成 CSS 文件之外，”File Watchers” 還支持其他一些常用的文件操作，例如文件格式轉換、代碼檢查等，對於使用 Rider 進行開發的工程師來說，”File Watchers” 是一個非常實用的工具，可以幫助我們更加高效地進行開發工作。
前製作業
打開設置查看插件中是否已經包含 File Watchers 和 Sass。
File Watchers 設置
- Scope: 設定監聽的範圍，監聽中的文件更改將立即或在保存時調用
File Watchers。 - Program: 指定工具的可執行文件的路徑（.exe、.cmd、.bat 或其他取決於特定工具），這裡我們設定 SASS。
- Arguments: 要傳遞給工具的參數，參數通常使用
macros，例如 $FileName$ 或 $FileNameWithoutExtension$，它們將被替換為實際文件名，這邊以:來劃分，左半部會自動代入監聽到的文件名稱，右半部則是輸出時的檔名。
除了編譯 SCSS 之外，File Watchers 還可以搭配其他工具來實現更多的自動化任務，例如，如果你的 CSS 有需要 Vendor Prefixes，你可以使用 autoprefixer 這個工具來自動加上相應的前綴詞，以實現跨瀏覽器的相容性。
具體來說，當你使用 File Watchers 監視 CSS 檔案的變化時，你可以設定自動執行 autoprefixer 工具，讓它自動加上相應的前綴詞，並將生成的 CSS 檔案保存到指定的目錄中，這樣一來，你就可以很方便地在開發網頁時，自動實現 CSS 的自動編譯和前綴詞的自動添加，大大提高了開發效率和品質。
注意事項
在使用 SCSS 編譯成 CSS 的自動化過程中，團隊開發中需要注意，有些成員可能會忘記編輯 SCSS 而直接修改 CSS 檔案，這樣的情況可能會導致之後的 SCSS 編譯覆蓋掉之前直接修改的 CSS，從而導致之前的編輯內容丟失。
為了避免這樣的問題，可以考慮將 CSS 檔案列入 gitignore 檔案清單中，然後在 CI/CD 流程中，利用 Docker file 構建過程中加入自動化編譯 SCSS 的步驟。最後，將生成的 CSS 檔案部署到環境中，以確保每次部署都具有一致性，進而減少潛在的錯誤和風險。
除了上述的注意事項外，還可以考慮設置適當的權限和訪問控制，限制只有特定的開發人員可以直接修改 CSS，可以進一步降低這樣的風險。
自動化對敏捷開發的重要性
敏捷開發強調快速且持續的交付有價值的產品，以迎合不斷變化的市場需求和客戶反饋，自動化工具對敏捷開發的好處:
1.節省時間和提高效率
使用自動化工具可以省去手動轉換的時間，並降低出錯機率，這樣就能夠更專注於開發核心功能，並在更短的時間內完成工作。
2.有助於立即交付有價值的產品
敏捷開發的核心理念之一是快速交付有價值的產品，自動化可以幫助開發人員更快速地完成開發，並且確保交付的產品是可用的、可靠的和具有高質量的。
3.可以輕鬆應對需求變更和迭代
市場需求和客戶反饋經常會導致產品需求的變更，敏捷開發需要開發人員能夠快速地應對這些變化，自動化可以簡化開發流程，減少代碼錯誤，從而更容易地實現需求變更和產品迭代。
自動化工具可以提高效率、節省時間、促進快速交付有價值的產品、簡化開發流程、提高產品品質，從而符合敏捷開發的核心理念。
📢【鈦坦熱烈徵才中】
在鈦坦沒有Boss，但要有自組織的Guts ❗❗
想要投入 #彈性工時 #自主升遷 #薪資透明 的工作文化 ❓ 還有～～豐富的內外訓教育課程隨你申請、專為敏捷團隊設計的開放式辦公空間、上班隨時前往酒吧暢飲放鬆一下…
🙋♂️ 職缺看這邊～
👉 https://gotica.io/鈦坦職缺/Blog
