SASS 的 `if` 函式
本文將說明 SASS 的 if 函式。
我們將從 if 函式的基礎到進階技巧，逐步帶你了解。
YouTube Video
SASS 的 if 函式
if() 函式是 SASS 提供的簡單條件函式，會根據布林條件回傳兩個值之一。它類似於 JavaScript 的三元運算子。
語法
語法如下：。
1// if(condition, trueValue, falseValue)- 當
condition為 true 時回傳trueValue；為 false 時回傳falseValue。
基本用法
例如，你可以使用 if() 函式依據主題是深色或淺色來切換背景與文字顏色。
範例代碼
1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7 background-color: $background-color;
8 color: $text-color;
9}- 若
$theme變數為"dark"，背景為黑、文字為白；若為"light"，背景為白、文字為黑。
產生的 CSS
1body {
2 background-color: black;
3 color: white;
4}- 由於
$theme變數為"dark"，背景為黑、文字為白。
@if 陳述式與 if() 函式之間的差異
Sass 提供用於條件分支的 @if 陳述式與 if() 函式，但它們的用途不同。
範例代碼
1$theme: "dark";
2
3// `@if` statement: Compile-time branching (syntax level)
4$background-color: null;
5@if $theme == "dark" {
6 $background-color: black;
7} @else if $theme == "light" {
8 $background-color: white;
9} @else {
10 $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17 background-color: $background-color;
18 color: $text-color;
19}@if陳述式用來控制在 Sass 編譯時要輸出哪些程式碼。- 相較之下，
if()函式會回傳一個值，並用於在運算式內動態切換值。
產生的 CSS
1body {
2 background-color: black;
3 color: white;
4}- 在此範例中，由於
$theme為"dark"，會套用黑色背景與白色文字顏色。 - 兩者的主要差異在於：
@if陳述式用來控制結構，而if()函式則用來回傳值。
使用巢狀的 if 函式
當需要複雜分支時，可以巢狀使用 if 函式。
範例代碼
1$theme: "custom";
2$custom-color: blue;
3
4$background-color: if(
5 $theme == "dark",
6 black,
7 if(
8 $theme == "light",
9 white,
10 $custom-color
11 )
12);
13
14body {
15 background-color: $background-color;
16}- 若
$theme為"dark"則回傳黑色；為"light"則回傳白色；否則回傳預設值（$custom-color）。
產生的 CSS
1body {
2 background-color: blue;
3}- 由於
$theme變數為custom，背景色為藍色。
實務案例
主題切換
以下是依據主題切換按鈕樣式的範例。
1$theme: "dark";
2
3.button {
4 background-color: if($theme == "dark", #333, #fff);
5 color: if($theme == "dark", #fff, #333);
6 border: 1px solid if($theme == "dark", #444, #ccc);
7}- 此程式碼是 SASS 的條件範例，會依
$theme變數的值切換按鈕的背景、文字與邊框顏色。透過if()函式動態設定深色與淺色主題的樣式。
產生的 CSS
1.button {
2 background-color: #333;
3 color: #fff;
4 border: 1px solid #444;
5}- 透過切換主題，可以一致地變更整體設計。
進階範例：動態設定色彩對比
來看一個依背景色自動設定文字顏色的範例。
範例代碼
1@use "sass:color";
2
3$background-color: #000;
4
5$text-color: if(
6 color.channel($background-color, "lightness", $space: hsl) > 50%,
7 black,
8 white
9);
10
11body {
12 background-color: $background-color;
13 color: $text-color;
14}color.channel()函式用來取得背景色的亮度（lightness）。若該值大於50%則選擇黑色；若小於50%則選擇白色作為文字顏色，從而自動最佳化與背景的對比。
產生的 CSS
1body {
2 background-color: #000;
3 color: white;
4}- 透過使用
if()函式，可以實作考量無障礙設計的彈性樣式，例如調整對比度。
搭配 @function 使用
在 @function 內使用 if 函式，可實現更彈性的樣式設計。
範例代碼
1@function theme-color($theme, $type) {
2 @return if(
3 $theme == "dark",
4 if(
5 $type == "background",
6 black,
7 white
8 ),
9 if(
10 $type == "background",
11 white,
12 black
13 )
14 );
15}
16
17body {
18 background-color: theme-color("dark", "background");
19 color: theme-color("dark", "text");
20}- 此範例示範在
@function中使用if()，依主題與色彩類型回傳合適的顏色。這能為各主題帶來一致且可重用的樣式設計。
產生的 CSS
1body {
2 background-color: black;
3 color: white;
4}- 建立並使用運用
if()函式的輔助函式，可提升整個專案的可維護性。
注意事項
-
if函式無法用於動態值 由於 CSS 本身是靜態語言，if函式會在編譯 SASS 時就決定數值。若要在執行階段進行條件判斷，則需要使用 JavaScript。 -
可讀性優先 由於巢狀的
if函式可能變得複雜並影響可讀性，你可以視需要使用 SASS 的@mixin和@function來整理程式碼。
結論
SASS 的 if 函式是一個強大的工具，能依條件回傳不同的值。不僅適用於簡單條件，也能運用在主題切換與動態樣式設定等多種情境。然而在處理複雜條件時，請注意可讀性，並善用 @mixin 與 @function 來提升可維護性。
熟練運用 if 函式即可實現更高效率且更彈性的樣式設計。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。