嗨各位，今天是鐵人賽第14天，今天也是要繼續講SCSS的基本用法，那我界直接開始介紹吧。

定義繼承

請問我該如何定義繼承呢?答:可以使用@extend，後面要跟著繼承選擇器，通常會搭配"%"，前面加上"%"的樣式不會被編譯。這是css沒有的功能，我們直接來看範例:
scss

%my-placeholder {
  font-weight: bold;
  color: red;
}
/*引入*/
.my-class {
  @extend %my-placeholder;
  background-color: yellow;
}

編譯後:

.my-class {
    font-weight: bold;
    color: red;
}

.my-class {
    background-color: yellow;
}

@function

在SCSS中，可以使用@function來創建自定義函數，且必需要return返回結果

語法

@function function-name($parameter1, $parameter2, ...) {
  @return some-value;
}

SCSS

@function add($a, $b) {
  $sum: $a + $b;
  @return $sum;
}
$result: add(5, 3); 

在上述範例中，函數接受兩個參數相加，將它們相加後使用返回了結果。

內建@function

SCSS內置了許多有用的內置函數，這些函數可用於處理顏色、數位、字串、清單等不同類型的數據，以生成樣式值。 以下是一些常見的SCSS內置函數：

SCSS（Sassy CSS）內置了許多有用的內置函數，這些函數可用於處理顏色、數位、字串、清單等不同類型的數據，以生成樣式值。 以下是一些常見的SCSS內置函數：

顏色函數：

• lighten($color, $amount)： 增加顏色的亮度。
• darken($color, $amount)： 減少顏色的亮度。
• rgba($color, $alpha)： 建立帶有透明度的顏色。
• mix($color1, $color2, $weight)： 在兩種顏色之間進行混合。

數位函數：

• percentage($value)： 將數字轉換為百分比。
• round($number)： 四捨五入到最接近的整數。
• min($numbers...)： 傳入數位中的最小值。
• max($numbers...)： 傳入數位中的最大值。

當然這些只是冰山一角，SCSS還有許多內建的@function。同時，內建函數提供了許多方便的工具，可以幫助我們快速生成樣式，從而提高開發速度。
今天就介紹到這裡，各位可以去官網查看更多功能。SCSS真的非常方便，我們可以更好地組織和管理樣式代碼，實現更高效、可維護的項目開發。 那我們明天鐵人賽再見。