Visual Studio：使用 Web Compiler 編譯 SCSS 檔案
RojerChen.2023.04.25
以前專案在執行的時候，因為團隊裡沒有人熟 CSS，也不知道該如何有效的管理，所以我們專案的 CSS 檔案通常都是幾千行跑不掉。想當然這又臭又長的 CSS 檔案一定是沒有人去維護，要加新的功能就寫在檔案的最下方，如果還有問題，就 important 來解決這一切。
那有什麼方法可以改善這樣的狀況，讓寫 CSS 像是寫程式一樣，可以載入別的檔案、有變數、有方法？有，那就是 SCSS。
寫 SCSS 其實跟寫 CSS 沒甚麼兩樣，只需要透過工具幫你把 SCSS 檔案轉成 CSS 檔案即可。
透過 Web Compiler 將 SCSS 轉成 CSS
- 安裝 Web Compile
- 建立一個副檔名為 scss 的檔案，透過 web compile 編譯後會多一個 css 檔案
- 建立完畢後，你可以在專案檔上看到 compilerconfig.json，透過修改這個檔案設定對應的檔案路徑。
SCSS 優點
我覺得寫 SCSS 的優點就跟一般寫程式一樣，你不可能一個程式幾千行、幾萬行，你一定會依據一些條件把檔案拆分成多個檔案，讓各個檔案負責對應的功能就好，這樣日後這些 CSS 檔案才有機會重覆再利用。
當我有一個新的頁面需要某些功能時，就可以透過 import 的方式把這些檔案載入就好，這樣就不用讓整個專案使用同一個 CSS 走天下了。
比方說我有一個 main.scss 檔案如下，該功能就會載入不同的 SCSS 檔案，最後再透過 web compiler 編譯成 css 檔。
@import "base/_normalize.scss";
@import "abstracts/_variable.scss";
@import "layout/header.scss";
@import "layout/body.scss";
@import "layout/footer.scss";
SCSS 架構
當你不用一個 CSS 檔案走天下後，你就可以依據功能來拆分，你可以參考 Structuring your Sass Projects 文章看看別人是怎樣拆分的，而我自己負責的專案，因為功能簡單，只需要簡單拆分成以下的結構即可。
sass/
|-abstracts
|-base
|-components
|-layout
sass/
|-abstracts
|-base
|-components
|-layout
心得
開始撰寫 SCSS 後，整體的維護就相對容易許多，因為同仁可以從不同的資料夾、檔案命名就可以快速找到對應的檔案，進一步的進行修改，大大的降低了程式維護上的難度。
0 意見:
張貼留言