關係運算子

關係運算子用於判斷數字之間的大小關係。它們會自動在相容的單位之間轉換。

  • <expression> < <expression> 會回傳第一個表達式的值是否小於第二個表達式的值。
  • <expression> <= <expression> 會回傳第一個表達式的值是否小於或等於第二個表達式的值。
  • <expression> > <expression> 會回傳第一個表達式的值是否大於第二個表達式的值。
  • <expression> >= <expression> 會回傳第一個表達式的值是否大於或等於第二個表達式的值。
程式碼遊樂場

SCSS 語法

@debug 100 > 50; // true
@debug 10px < 17px; // true
@debug 96px >= 1in; // true
@debug 1000ms <= 1s; // true
程式碼遊樂場

Sass 語法

@debug 100 > 50  // true
@debug 10px < 17px  // true
@debug 96px >= 1in  // true
@debug 1000ms <= 1s  // true

無單位的數字可以與任何數字比較。它們會自動轉換為該數字的單位。

程式碼遊樂場

SCSS 語法

@debug 100 > 50px; // true
@debug 10px < 17; // true
程式碼遊樂場

Sass 語法

@debug 100 > 50px  // true
@debug 10px < 17  // true

具有不相容單位的數字無法比較。

程式碼遊樂場

SCSS 語法

@debug 100px > 10s;
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.
程式碼遊樂場

Sass 語法

@debug 100px > 10s
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.