SCSS 不僅提供了一系列內建函數，還允許你創建自己的自定義函數。這讓開發者能根據項目需求，進一步提升樣式的可重複性和靈活性。自定義函數可以執行數學運算、處理顏色、字串或列表等操作，從而生成更具動態的樣式。

一、如何創建自己的 SCSS 函數

一個簡易的定義，SCSS 函數語法如下：

@function 函數名稱(參數...) {
  @return 返回值;
}

@function：用來定義自定義函數的關鍵字。
參數：傳入函數的變量，可以根據需求設定多個參數。
@return：指定函數的返回值，返回的內容將會被應用到樣式中。

範例淺顯易懂吧

二、自定義函數範例

1.簡單的數學運算函數

假設我們經常需要將 px 單位轉換成 rem，我們可以創建一個函數來自動完成這個轉換。

@function px-to-rem($px, $base-font-size: 16px) {
  @return $px / $base-font-size * 1rem;
}

.text {
  font-size: px-to-rem(32); // 轉換 32px 為 rem 單位
}

2.多參數函數範例(重要)

創建一個更加靈活的函數，來處理多個參數。比如創建一個可以自動生成邊框樣式的函數：

@function border-generator($width, $style, $color) {
  @return #{$width} #{$style} #{$color};
}

.box {
  border: border-generator(2px, solid, #3498db); // 動態生成邊框樣式
}

SCSS 自定義函數能根據具體的需求創建更靈活的樣式邏輯。無論是簡單的數學計算、顏色處理，還是更加複雜的樣式生成，這些自定義函數都能讓你的樣式更加動態和模組化，有助於減少重複代碼並提升項目的可維護性。
今天差點忘記寫...