一、為何選此主題?

當時我在大二上學期修讀了梅興老師的「網頁基本原理與技術」課程，課堂的其中一個報告要求我們實作一個網頁，這是我第一次接觸到網頁前端程式設計。透過這門課，我學到了網頁的基礎構成和基本的實作技巧。課程結束後，我發現自己非常喜歡將網頁從概念變為實體的過程，於是決定繼續鑽研網頁設計與開發。

在老師建議的幾個主題中，我選擇了SASS/SCSS的學習。這是因為我意識到自己以往編寫的CSS語法雖然簡單，但導致了程式碼過於冗長、重複繁雜（還記得當時一直複製貼上的過程，最後發現我居然寫了好幾行的程式碼!）。希望在接下來的30天裡，透過自主學習，我能夠有所進步並且掌握更高效的編寫方式。

圖一、大二時自己嘗試寫的靜態網站

二、簡介CSS預處理器的概念

CSS預處理器是一種擴展CSS語法的工具，它允許開發者使用更加靈活、強大的語法撰寫樣式，然後將這些代碼轉換成普通的CSS，供瀏覽器解析使用。這些預處理器增加了許多CSS原生不具備的功能，如變量、巢狀、條件邏輯、函數、混入（Mixins）等，讓CSS開發更具可讀性、可維護性，並提高工作效率。

常見的CSS預處理器包括：

1.SASS、SCSS

最受歡迎的CSS預處理器之一，也是我選擇的主題，支持變量、巢狀、混入、繼承等功能。

圖二、SASS、SCSS圖示，來源:https://www.boardinfinity.com/blog/scss-and-sass-explanation-and-differences/

2.LESS

類似SASS，也提供變量、函數等功能，但與JavaScript語法更加相近。

圖三、LESS圖示，來源:https://github.com/less

3.Stylus

基於 Node.js 開發，更為靈活、簡潔，允許省略分號與大括號，提供高度的自定義。

三、為什麼需要預處理器？

1.增強CSS功能

CSS原生的語法較為簡單，缺乏程式設計的靈活性，如沒有變量、函數、邏輯控制等。預處理器引入了這些功能，讓樣式表更加強大且易於擴展。例如:變量，可以在多處使用相同的屬性值，方便統一管理，如顏色或間距。巢狀規則，允許我們在選擇器中使用巢狀語法，讓代碼更具結構性，更接近HTML的層次結構。

2.提高代碼的可維護性

預處理器讓CSS代碼更易於維護。當我們在大型專案中使用大量的相同屬性時，透過變量和混入，我們可以輕鬆管理和更新這些屬性，減少重複性和錯誤。

3.模組化與重用

預處理器允許我們將樣式拆分成多個模組文件，並透過@import或其他機制將其合併，這讓樣式表更加組織有序。另外，透過混入、函數等功能，我們可以定義重用的樣式邏輯，大大減少重複代碼

4.適應大型項目與團隊合作

在大型項目或團隊合作中，預處理器提供了更具結構化的樣式管理方式。例如，我們可以將樣式分為變量、混入、基礎樣式、模組樣式等，讓團隊中的不同成員專注於不同部分，避免混亂。

下一次我將簡介SASS與SCSS的內容

以上是我第一天的內容，請大家多多指教!!

(居然還有出貼圖! 好可愛!)