Sass 運算子：算術、比較、邏輯與單位運算的陷阱

Sass 可以在 編譯期 做運算，算完之後產出的 CSS 裡只剩下結果。這讓「基準值乘以倍率」這類推導可以寫成程式碼，而不是每次自己按計算機。

算術運算子

運算子	用途	範例
+	加	16px + 8px → 24px
-	減	16px - 8px → 8px
*	乘	16px * 2 → 32px
%	取餘數	10 % 3 → 1
math.div()	除	math.div(16px, 2) → 8px

@use "sass:math";

$base: 16px;

.title {
  font-size: $base * 1.5;          // 24px
  margin-bottom: math.div($base, 2); // 8px
}

除法要用 math.div()

早期 Sass 用 / 做除法，Dart Sass 已經把它標記為 棄用：

.a { width: $w / 2; }              // ⚠️ 棄用，會出現警告
.b { width: math.div($w, 2); }     // ✅

原因是 / 在 CSS 裡本來就有分隔的意思：

font: 12px/1.5 sans-serif;   /* 這裡的斜線是分隔字級與行高 */
grid-area: 1 / 2 / 3 / 4;    /* 這裡是分隔四個值 */

Sass 沒辦法可靠判斷你想要哪一種，所以改用函式明確表達。詳見 sass:math。

單位會參與運算

這是最容易出錯的地方：單位不是裝飾，它跟著算。

16px + 8px    // 24px  ✅
16px * 2      // 32px  ✅
16px * 2px    // 32px*px ❌ 平方像素，不是有效 CSS

乘除時只讓一邊帶單位

$base * 2 是對的，$base * 2px 不是。除法同理：math.div(100px, 4) 得到 25px，math.div(100px, 4px) 得到 不帶單位的 25。

不同單位相加時，可換算的會自動換算：

1in + 10px    // 106px（1in = 96px）
1cm + 1mm     // 1.1cm

不可換算的直接報錯：

10px + 2em    // ❌ Error：em 要執行時才知道多大
100% - 20px   // ❌ 同理

這種需要混用單位的情況只能交給 CSS 的 calc()。

與 calc() 的分工

	Sass 運算	calc()
計算時機	編譯期	瀏覽器執行時
產出	一個固定數值	calc() 原樣留在 CSS
混用 px 與 %	不行	可以
引用 CSS 自訂屬性	不行	可以

$gap: 16px;

.main {
  // 編譯期算得完 → Sass
  padding: $gap * 2;

  // 要執行時才知道 → calc()，用插值把 Sass 變數放進去
  width: calc(100% - #{$gap * 2});
}

比較運算子

$w: 100px;

@if $w > 80px {
  // ...
}

運算子	說明
== !=	相等、不相等，所有型別都能用
< <= > >=	大小比較，只能用在數字

比較大小時單位要相容

10px > 5 會報錯，10px > 5px 才行。字串與色彩只能用 == 和 !=。

邏輯運算子

Sass 用英文單字，不是符號：

@if $a > 0 and $b > 0 { }
@if $a == null or $b == null { }
@if not $is-dark { }

運算子	說明
and	兩者皆真
or	任一為真
not	取反

只有 false 和 null 是假

Sass 的判斷比 JavaScript 單純：只有 false 與 null 為假，0、空字串、空 list 全都算真。細節見 條件判斷 @if。

字串相加

+ 也能串接字串，結果的引號跟著 左邊 那個：

"a" + "b"     // "ab"
"a" + b       // "ab"
a + "b"       // ab（不帶引號）

串字串請優先用插值

"#{$a}#{$b}" 的意圖比 + 清楚，也不必記引號規則。字串處理函式見 sass:string。

常見問題

為什麼不能再用斜線做除法？

因為斜線在 CSS 裡本來就有分隔的用途，例如 font: 12px/1.5 與 grid-area 的寫法，Sass 無法可靠判斷你要的是除法還是分隔符。Dart Sass 已將斜線除法標記為棄用，改用 math.div() 明確表達。

兩個不同單位相加會怎樣？

可換算的單位會自動換算，例如 1in + 10px 會得到 106px。無法換算的組合，例如 10px + 2em，會直接編譯錯誤，因為 em 的實際大小要到瀏覽器執行時才知道。

Sass 運算和 CSS calc() 差在哪？

Sass 運算在編譯期算完，產出的是一個固定數值；calc() 留在 CSS 裡由瀏覽器執行時計算，所以可以混用 px 與百分比，也可以引用 CSS 自訂屬性。編譯期算得完的用 Sass，需要執行時才知道的用 calc()。

為什麼 10px 乘以 10px 得到的結果很奇怪？

因為單位也會參與運算，兩個 px 相乘得到的是平方像素，那不是有效的 CSS 單位。乘法與除法時應該只讓其中一邊帶單位，另一邊用純數字。

延伸閱讀

資料型別數學 sass:math條件判斷 @ifCSS 單位